二十九、webpack@3.6.0 对应的loader版本

"devDependencies": {
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.5",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^3.6.0"
  }

图片文件处理-修改文件名称

■我们发现webpack自动帮助我们生成一个非常长的名字

• 这是一个32位hash值,目的是防止名字重复
• 但是,真实开发中,我们可能对打包的图片名字有一定的要求
• 比如,将所有的图片放在一个文件夹中,跟上图片原来的名称,同时也要防止重复

■所以,我们可以在options中添加上如下选项:

• img :文件要打包到的文件夹
• name :获取图片原来的名字,放在该位置
• hash:8 :为了防止图片名称冲突,依然使用hash,但是我们只保留8位
• ext:使用图片原来的扩展名

■但是,我们发现图片并没有显示出来,这是因为图片使用的路径不正确

• 默认情况下,webpack会将生成的路径直接返回给使用者
• 但是,我们整个程序是打包在dist文件夹下的,所以这里我们需要在路径下再添加一个dist/

■webpack.config.js配置：name属性的含义：文件夹/[文件原始名称].[8位哈希值].[文件扩展名]

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

■最后的打包生成结果：