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

一、解决什么问题

     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配置如下：

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

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

1         // 删除文件 保留新文件
2         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

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

 

文章原创，转载请注明出处，谢谢！