diff --git a/README.md b/README.md index 18c97ce..030d11f 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ Less & CSS资源: - postcss-loader; - postcss-preset-env; - mini-css-extract-plugin; +- css-minimizer-webpack-plugin; ### **项目使用** diff --git a/config/webpack.dev.js b/config/webpack.dev.js index 9476640..0166a94 100644 --- a/config/webpack.dev.js +++ b/config/webpack.dev.js @@ -54,12 +54,7 @@ module.exports = { options: { postcssOptions: { plugins: [ - [ - "postcss-preset-env", - { - browsers: "last 2 versions" - } - ] + "postcss-preset-env" ] } } diff --git a/config/webpack.prod.js b/config/webpack.prod.js index 16af563..186499c 100644 --- a/config/webpack.prod.js +++ b/config/webpack.prod.js @@ -6,6 +6,8 @@ const HTMLWebpackPlugin = require("html-webpack-plugin"); const ESLintWebpackPlugin = require("eslint-webpack-plugin"); // 引入CSS单独打包插件 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +// 引入CSS压缩打包插件 +const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); // webpack中的所有配置信息 module.exports = { @@ -58,12 +60,7 @@ module.exports = { options: { postcssOptions: { plugins: [ - [ - "postcss-preset-env", - { - browsers: "last 2 versions" - } - ] + "postcss-preset-env" ] } } @@ -87,7 +84,8 @@ module.exports = { new MiniCssExtractPlugin({ // 定义输出文件名和目录 filename: "static/css/main.css", - }) + }), + new CssMinimizerPlugin() ], // 设置引用模块 diff --git a/package.json b/package.json index 27a16fb..92ef3db 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "babel-loader": "^8.2.5", "core-js": "^3.22.8", "css-loader": "^6.7.1", + "css-minimizer-webpack-plugin": "^4.0.0", "eslint": "^8.17.0", "eslint-webpack-plugin": "^3.1.1", "html-webpack-plugin": "^5.5.0", @@ -33,5 +34,10 @@ "webpack": "^5.73.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.9.1" - } + }, + "browserslist": [ + "last 2 versions", + "> 1%", + "not dead" + ] }