在生产模式下,我的webpack压缩了.js(应该压缩)。但是我还需要最小化.css,为此,我必须使用OptimizeCssAssetsPlugin。当我使用它时,它将最小化我的.css,但随后我的.js仍保持最小化。
我的猜测是,当我使用优化(在“模块和插件”旁边)时,js缺少了一些东西,因为没有整个“优化”块就可以了。那是什么为什么?
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WriteFilePlugin = require("write-file-webpack-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
publicPath: '/'
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(sa|sc|c)ss$/,
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./demo/index.html",
filename: "index.html",
inject: false
}),
new MiniCssExtractPlugin({
filename: "style.css"
}),
new WriteFilePlugin()
],
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin(),
],
},
};
请查看MiniCssExtractPlugin文档的生产配置:
虽然webpack 5可能内置了CSS最小化器,但是对于webpack 4,您需要自带。要缩小输出,请使用诸如optimize-css-assets-webpack-plugin之类的插件。设置optimization.minimizer会覆盖webpack提供的默认值,因此请确保还指定一个JS最小化器...
问候,
const TerserJSPlugin = require('terser-webpack-plugin');
....
optimization: {
minimizer: [
// Minify js files:
// (TerserJS is webpack default minifier but we have to specify it explicitly
// as soon as we include more minifiers)
new TerserJSPlugin({}),
// Minify css files:
new OptimizeCSSAssetsPlugin(),
],
},