url-loader解释

我们在css文件中加载图片：

body{
    background: url(../img/test.jpg);
}

通过webpack打包会出现无法找到url-loader的问题，此时需要安装url-loader，如果webpack安装的版本时3.6.0，对应安装url-loader命令如下：

cnpm install --save-dev url-loader@1.0.0

安装后，需要在webpack.config.js中对该loader进行配置：

  {
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          // 当小于limit时，会将图片编译成base64格式字符串
          //当大于limit时，需要使用file-loader模块进行加载
          limit: 8196,
          name:'img/[name].[hash:8].[ext]'
        },

      }
    ]
  }

1. 关于limit的解释

   当图片尺寸小于8196字节时，图片会被转换为base64编码格式加载到url链接后面，替换掉test.jpg文件名称，不会生成实际文件到dist目录中。但是当图片大小突破8196时，打包就会失败，提醒缺少file-loader,要安装file-loader，安装命令如下：

   cnpm install --save-dev file-loader@1.1.5
   

   打包完成后，会在dist目录下生成一个被随机值替换文件名的图像文件，如果此时打开html文件，会提醒无法找到该文件。错误提示如下：

   >http://127.0.0.1:5500/12-%20%E5%89%8D%E7%AB%AF%E6%A8%A1%E5%9D%97%E5%8C%96/02-webpack/04-less%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86/67328b5d4b41161bd04bb7dfe67d7533.jpg 404 (Not Found)
   

   这个提示原因：html文件默认会从同级文件中查找图像文件，但实际上，图像文件会被生成到dist目录下，所以无法找到，解决办法：

   在webpack.config.js中配置publicPath:'dist/'，如下所示：

       output: {
           path: path.resolve(__dirname, 'dist'),//path.resolve对两个字符串进行拼接
           filename: 'bundle.js',
           publicPath:'dist/'
       },
   

   publicPath配置的目的表示所有关于url地址都从dist下开始寻找

2. 通常情况下，我们不希望打包的所有文件全都放到dist根目录下，尤其是当分布在src下不同文件夹下的同名文件打包到dist后，如果都平铺到dist根目录下，有可能造成覆盖，为此，需要对打包的文件进行目标文件名的指定

   name:'img/[name].[hash:8].[ext]'
   

   这句话的意思就是打包后的图像文件位于dist目录下的img目录下，文件名后面跟一个点，点后面跟一个8位的哈希值，最后跟上原来文件的扩展名

3. 注意：上述操作之前需要安装css -loader和style-loader，因为需要解析css文件