發現問題
當我使用'mini-css-extract-plugin'進行css文件獨立打包，使用'url-loader'對css中引用的圖片文件等進行打包時，發現:在html中的<img>標簽內的圖片可以正常顯示，但在css中寫在background-image中的圖片無法正常顯示，package.json文件與webpack.config.js文件如下
"devDependencies": {
"css-loader": "^5.0.1",
"file-loader": "^5.1.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.1",
"less": "^4.1.0",
"less-loader": "^7.3.0",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"style-loader": "^2.0.0",
"url-loader": "^3.0.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
const config = {
entry: './src/js/index.js',
output: {
filename: 'js/bundle.js',
path: join(__dirname, '/dist'),
},
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', {
loader: 'postcss-loader',
options: {
loader: 'postcss',
plugins: [require('postcss-preset-env')()]
}
}]
}, {
test: /\.(jpg|png|gif|jpeg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8 * 1024,
esModule: false,
name: '[hash:10].[ext]',
outputPath: 'imgs'
}
}]
}, {
test: /\.html$/,
use: ['html-loader']
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/html/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/[hash:10].css'
}),
new OptimizeCssAssetsPlugin()
],
問題描述
參考上面的代碼，運行之后發現在css中寫入的圖片無法顯示，但在html中寫入的卻可以正常顯示
問題解析
在plugins中，在MiniCssExtractPlugin構造函數中寫入的合並后的css文件放在了一個css文件夾中，打包后的dist文件夾結構是：
│ index.html
│
├─css
│ 8fb21488fb.css
│
├─imgs
│ 304de14132.jpeg
│ c258995612.jpeg
│ e185b05b1c.jpeg
│
└─js
bundle.js
而在css文件夾中的文件的url地址是以imgs開頭的，也就是通過url-loader輸出的文件夾，而從上面的文件夾結構可以看出，css在一個獨立的文件夾內，無法讀取到imgs文件夾
解決方法
在MiniCssExtractPlugin中寫入publicPath，將所有通過css寫入的圖片文件地址全部添加頭部../
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}, 'css-loader', {
loader: 'postcss-loader',
options: {
loader: 'postcss',
plugins: [require('postcss-preset-env')()]
}
}]
通過這樣方式打包的css文件，其內部的所有url地址全部都以../開頭，這樣就可以讀取到imgs文件夾