webpack图片文件处理

安装loader

npm install --save-dev url-loader

当图片小于limit时，使用url-loader 会自动转成base-64编码

npm install --save-dev file-loader

当图片大于limit时，使用file-load编码

配置webpack.config.js

 {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时 回编译成base-64
              limit: 13000
            }
          }
        ]
      }

修改压缩后的公共文件路径

 output:{
    path : path.resolve(__dirname,'dist'), //路径拼接 //必须是绝对路径
    filename:'bundle.js',
    publicPath:'dist/'//添加一行
  },

打包

打包以后会在dist文件夹生成一张图片

结果

链接：https://pan.baidu.com/s/1et9egrsk4AjF7zsD5U_IIA
提取码：rd7q