网络包版本:4.16.3
全部编译成功。
我在 bundle.css 中编译后的代码不是 minify。
我尝试在 text-webpack-plugin 中使用 minimize: true,但它不起作用。
对于编译,我在命令行中使用命令:webpack 在我的工作目录中
我做错了什么?
我的 wepback 配置:
'use strict'
const webpack = require("webpack");
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
context: __dirname,
mode: 'production',
entry: __dirname + "/js/init.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
noUiSlider: 'nouislider',
Vue: 'vue'
}),
new ExtractTextPlugin("bundle.css")
],
module: {
'rules': [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: {
loader: "css-loader",
options: {
minimize: true
}
}
})
}
, {
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: {
loader: "css-loader!less-loader",
}
})
}, {
test: /\.(png|jpe?g|gif|cur)$/,
loader: 'url-loader?limit=8192&name=imgs/[name]-[hash].[ext]'
}
]
}
};
最佳答案
使用OptimizeCSSAssetsPlugin为了缩小 css Assets ,提取器仅用于分离输出 Assets 。请注意,缩小适用于生产模式,即确保在 webpack 构建命令中传递“--mode production”。
{....,
optimization: {
minimizer: [
//Incase you want to uglify/minify js
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
})
]
}
....}
关于javascript - 无法使用 webpack 缩小 css 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51758302/