webpack中把css文件打包成独立文件,背景图片不显示的问题
程序员文章站
2022-05-25 21:13:22
...
webpack.config.js
const { resolve } = require('path')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')//压缩css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css成独立文件
const HtmlWebpackPlugin = require('html-webpack-plugin')//打包html文件的
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: resolve(__dirname, 'dist'),
filename: 'index.js',
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 9000,
esModule: false
}
}
],
type: 'javascript/auto'
},
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../', //指定生成css寻找图片的路径
// 相对路径,图片在 ./dist/下面,因此就是 ../
}
},
"css-loader"
]
}
]
},
plugins: [
new CssMinimizerPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].css' //生成的css文件名
}),
new HtmlWebpackPlugin()
]
}
问题:进行了css压缩成单独文件,图片压缩等操作后,却一直发现背景图没有显示。
最后发现一个很傻的原因就是,我浏览器打开的index.html是没压缩前的html!!!!!!!!!根本看不到效果,好吗!!!!!!!
导入html-webpack-plugin,配置以下生成打包好的html直接运行
const HtmlWebpackPlugin = require('html-webpack-plugin')
尽情嘲笑自己一翻!!!!!!!!!
此外,publicPath的用法:
// publicPath 是资源相对于上下文的相对路径
// 例如:对于 ./css/admin/main.css publicPath 将会是 ../../
// 而对于 ./css/main.css publicPath 将会是 ../
上一篇: Java中面向对象思想的浅层解析
下一篇: bootstrap-datepicker