1. 执行步骤
1)创建相关文件
2)处理压缩相关依赖
直接下载optimize-css-assets-webpack-plugin插件,在plugins中使用就行
4.2 代码段
1)webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname,'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
new HtmpWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
new OptimizeCssAssetsWebpackPlugin()
],
mode: 'development'
}
2)a.css
#box1 {
width: 100px;
height: 100px;
background-color: pink;
display: flex;
backface-visibility: hidden;
}
3)b.css
#box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
4)
import "../css/a.css";
import "../css/b.css"
执行webpack,查看打包输出后的built.css文件可以看到做了压缩处理