webpack图片压缩的坑

如果我们想将图片文件打包到指定路径下，我们需要在前面准备加载器插件：

npm install url-loader --save-dev
npm install file-loader --save-dev

在rules中添加

{
   test: /\.(png|jpg|jpeg|gif)$/,
   use:[
        {
          loader: "url-loader",
          options: {
            name:'[name][hash:5].[ext]',
            limit:8*1024,
            outputPath:'image'
          }
        }
       ]
},

这个时候你发现你的图片已经编译成了base64格式了，但是你HTML中的图片路径地址没有遍，这个时候我想你大概想到的是html-loader或者是img-loader吧。其实你这是没有错的，但是在新版本的webpack中不行了，因为它和HTMLWebpackPlugin冲突，所以我们这个时候就需要做选择了，我选择的是使用HTMLWebpackPlugin。这个时候我们需要做以下几个操作

• 将html文件改成ejs文件

• <img src="<%= require('../images/1.png')%>" alt="">

• template: "./public/index.ejs"

最终我们大功告成！