npm install --save-dev optimize-css-assets-webpack-plugin
webpack配置:
const { resolve } = require(\'path\');
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');
const MiniCssExtractPlugin = require(\'mini-css-extract-plugin\');
const OptimizeCssAssetsWebpackPlugin = require(\'optimize-css-assets-webpack-plugin\')
// 设置nodejs环境变量
// process.env.NODE_ENV = \'development\';
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\',
{
loader: \'postcss-loader\',
options: {
ident: \'postcss\',
plugins: () => [
// postcss的插件
require(\'postcss-preset-env\')()
]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: \'./src/index.html\'
}),
new MiniCssExtractPlugin({
filename: \'css/built.css\'
}),
// 压缩css
new OptimizeCssAssetsWebpackPlugin()
],
mode: \'development\'
};
压缩后的 bundle.css