基于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查看效果

五、效果如下图

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

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

 

 

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

 

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

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

 

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

 

你可能感兴趣的:(基于webpack实现多html页面开发框架三 图片等文件路径替换、并输出到打包目录)