webpack---打包圖片資源
阿新 • • 發佈：2021-06-18
一：圖片分類：
1 css background-image: url('xxx.png');
2 html <img src="xxx.png">
二：打包css 圖片
1 下載 url-loader file-loader
npm i url-loader file-loader -D
三:打包html通過img使用圖片
1 下載 html-loader
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.less$/,
// 要使用多個loader處理用use
use: ['style-loader', 'css-loader', 'less-loader']
},
{
// 問題：預設處理不了html中img圖片
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
// 使用一個loader
// 下載 url-loader file-loader
loader: 'url-loader',
options: {
// 圖片大小小於8kb，就會被base64處理
// 優點: 減少請求數量（減輕伺服器壓力）
// 缺點：圖片體積會更大（檔案請求速度更慢）
limit: 8 * 1024,
// 問題：因為url-loader預設使用es6模組化解析，而html-loader引入圖片是commonjs
// 解析時會出問題：[object Module]
// 解決：關閉url-loader的es6模組化，使用commonjs解析
esModule: false,
// 給圖片進行重新命名
// [hash:10]取圖片的hash的前10位
// [ext]取檔案原來副檔名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 處理html檔案的img圖片（負責引入img，從而能被url-loader進行處理）
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
注意：
- 雖然 沒有配置file-loader,是因為url-loader 包含file-loader，當圖片資源小於limit配置時，會以url-loader打包經過base64打包圖片，優點減少http請求，大於limit配置時，會以file-loader打包圖片資源