webpack配置時對圖片文件的處理

1.安裝url-loader

npm install --save-dev url-loader

2.配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, //8kb
              name: 'img/[name].[hash:8].[ext]' // 圖片打包的格式
            }
          }
        ]
      }
    ]
  }
}

運行會發現：

• 當加載的圖片小於limit時，圖片會以base64形式返回：
  

• 當加載的圖片大於limit時，需要使用file-loader模塊進行加載
  

要先安裝file-loader

npm install --save-dev file-loader

此時重新打包即可加載大圖片，圖片會按照設置好的規則出現在dist文件夾下。