您的位置:首页 > Web前端 > HTML

基于webpack实现多html页面开发框架三 图片等文件路径替换、并输出到打包目录

2019-11-22 16:52 513 查看

一、解决什么问题

     1、图片路径替换、并输出到打包目录

     2、输出目录清理

二、需要安装的包

  file-loader:html、css中图片路径替换,图片输出到打包目录;命令:npm install --save-dev file-loader

  url-loader: 在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL,其依赖于file-loader;命令:npm install --save-dev url-loader

  clean-webpack-plugin:清理打包目录插件,根据output指定目录清理;命令: npm install clean-webpack-plugin --save-dev

三、webpack.config.js新增配置

  url-loader配置如下:

{
test: /\.(png|svg|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,    //小于这个数时,会转成DataURL
name:'assets/img/[name].[hash:9].[ext]',//输出到文件夹,基于output根目录
}
}
]
}

  文件清理插件配置:首先在头部引入 const { CleanWebpackPlugin } = require("clean-webpack-plugin"),在plugins进行配置,配置如下:

// 删除文件 保留新文件
new CleanWebpackPlugin(),

四、测试

  1、在home中index.html引入图片

  2、在home中的index.scss中引入图片

  3、运行npm run build查看效果

五、效果如下图

  

 

 

注意:new CleanWebpackPlugin()要做为第一个插件,放到末尾在dist中会报找不到文件

 

源码地址:https://github.com/James-14/webpack4_multi_page_demo

写的不对之处请大家批评指正~~~~!!!!!! 

 

文章原创,转载请注明出处,谢谢!

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐