webpack4_mini-css-extract-plugin与url-loader配合使用时无法正确显示图片的解决方法
发现问题
当我使用'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文件夹
