二十九、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]'
            }
          }
        ]
      }

■最后的打包生成結果：