前言

此內容是個人學習筆記,以便日後翻閱。非教程,如有錯誤還請指出

webpack打包圖片和劃分文件路徑

使用圖片的方式

• 通過 new Image()
• 在 css中設置 background-image
  
• 在 html中使用img標簽引用圖片

需要一個合適的 loader,對圖片進行處理

file-loader: 指示 webpack將所需對象作為文件發出並返回其公共URL
url-loader: 以base64編碼的URL加載文件,減少http請求。

cnpm i file-loader url-loader --save-dev

weebpack配置:

  module.exports = {
    ...
    module: {
      rules: [
        {
          test: /.css$/,
          use: [‘style-loader‘, ‘css-loader‘]
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: {
            loader: ‘url-loader‘,
            options: {
              limit: 10000,   // 小於 8kb的圖片轉換為base64編碼,減少http請求
            }
          }
        }
      ]
    }
  }
 

劃分文件路徑

輸出後的資源如 css文件，圖片文件想要給他們劃分文件夾。 如css的文件都方法 css的文件夾下, 圖片都放在 images文件夾下

基上面代碼,webpack配置

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘)
module.exports = {
    ...
    module: {
      rules: [
        {
          test: /.css$/,
          use: [ MiniCssExtractPlugin.loader, ‘css-loader‘]
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: {
            loader: ‘url-loader‘,
            options: {
              limit: 10000,   // 小於 8kb的圖片轉換為base64編碼,減少http請求
              outputPath: ‘/images‘
            }
          }
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: ‘/css/[name].css‘
      })
    ]
  }
 

css、html等文件的引用路徑會自動改變。

筆記地址

Webpack4 學習筆記五 圖片解析、輸出的文件劃分目錄