webpack5使用url-loader后出現圖片打不開,資源重復問題
問題
使用webpack5進行圖片資源打包時,打包后圖片打不開,并且有重復的圖片資源。
webpack配置情況
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/main.js",
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
module: {
rules: [
// loader配置
{
test: /\.less$/,
// 要使用多個loader處理寫成數組,這里就要寫成use
use: ['style-loader', 'css-loader', 'less-loader']
},
// 處理圖片資源
{
test: /\.(jpg|png|gif)$/,
// 單個loader處理,這里就要寫成loader
loader: 'url-loader',
options: {
// 當圖片大小小于8kb,就會被base64處理
// base64優點:減少請求數量(減輕服務器壓力)
// base64缺點:圖片體積會更大(文件請求速度更慢)
limit: 10 * 1024
}
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode: 'development'
};
解決
查詢webpack官網中的url-loader
有這樣一段描述:
當在 webpack 5 中使用舊的 assets loader(如 file-loader/url-loader/raw-loader 等)和 asset 模塊時,你可能想停止當前 asset 模塊的處理,并再次啟動處理,這可能會導致 asset 重復,你可以通過將 asset 模塊的類型設置為 'javascript/auto' 來解決。
所以在使用每個loader的后面加上: type: 'javascript/auto'
即:
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/main.js",
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
module: {
rules: [
// loader配置
{
test: /\.less$/,
// 要使用多個loader處理寫成數組,這里就要寫成use
use: ['style-loader', 'css-loader', 'less-loader']
},
// 處理圖片資源
{
test: /\.(jpg|png|gif)$/,
// 單個loader處理,這里就要寫成loader
loader: 'url-loader',
options: {
// 圖片大小小于8kb,就會被base64處理
// 優點:減少請求數量(減輕服務器壓力)
// 缺點:圖片體積會更大(文件請求速度更慢)
limit: 10 * 1024
},
type: 'javascript/auto'
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode: 'development'
};
打包后效果

還是有問題,
url-loader默認采用ES模塊語法,即import "…/XXXX.png";
而Vue生成的是CommonJS模塊語法,即require("…/example.png");二者不一致。
兩個解決辦法:①讓file-loader或url-loader采用CommonJS語法;②讓Vue采用ES語法。
這里采用第①種方法:
在處理圖片資源的loader中添加:
esModule: false
修改后的配置如下:
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/main.js",
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
module: {
rules: [
// loader配置
{
test: /\.less$/,
// 要使用多個loader處理寫成數組,這里就要寫成use
use: ['style-loader', 'css-loader', 'less-loader']
},
// 處理圖片資源
{
test: /\.(jpg|png|gif)$/,
// 單個loader處理,這里就要寫成loader
loader: 'url-loader',
options: {
// 圖片大小小于8kb,就會被base64處理
// 優點:減少請求數量(減輕服務器壓力)
// 缺點:圖片體積會更大(文件請求速度更慢)
limit: 10 * 1024,
esModule: false
},
type: 'javascript/auto'
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode: 'development'
};
結果

浙公網安備 33010602011771號