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

 {
                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

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

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