接上篇 webpack 将js中引入的css文件独立打包成css文件
同样打开webpack官网进行相关操作
链接:https://www.webpackjs.com/plugins/css-minimizer-webpack-plugin/
第一步:安装
css-minimizer-webpack-plugin
插件,在项目所在路径的终端下输入以下命令后回车等待安装
npm install css-minimizer-webpack-plugin --save-dev
第二步:按照webpack官网修改webpack.config.js文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
entry:path.resolve(__dirname,'src/login.js'),
output:{
path:path.resolve(__dirname,'dist'),
filename:'login/login.js',
clean:true
},
plugins:[new HtmlWebpackPlugin({
// 模板文件
template:path.resolve(__dirname,'src/login.html'),
// 输出文件
filename:path.resolve(__dirname,'dist/login/login.html')
}),
new MiniCssExtractPlugin(),
new MiniCssExtractPlugin()
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
optimization: {
minimizer: [
// 在 webpack@5 中,你可以使用 `...` 语法来扩展现有的 minimizer(即 `terser-webpack-plugin`),将下一行取消注释 // `...`,
new CssMinimizerPlugin(),
],
},
}
第三步:在项目所在路径的终端下输入npm run build后回车等待安装
此时打包后的main.css文件中引入login.css的代码也已经压缩,收工!!!