javascript 无法使用 webpack 缩小 css 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51758302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can not minify the css code with webpack
提问by Alexander Loginov
Webpack version: 4.16.3
网络包版本：4.16.3
All compilation is successful.
My code after compilation in bundle.css is not minify.
I try to use minimize: truein text-webpack-plugin, but it not working.
全部编译成功。
我在 bundle.css 中编译后的代码没有缩小。
我尝试在 text-webpack-plugin 中使用最小化：true，但它不起作用。
For compile I use command in command line: webpackin my working directory
对于编译，我在命令行中使用命令：webpackin my working directory
What am I doing wrong?
我究竟做错了什么？
My wepback config:
我的 webback 配置：
'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]'
}
]
}
};
回答by Ishan Gulati
Use OptimizeCSSAssetsPluginto minify css assets, extractors are used to separate output assets only. Note that minification works with production mode i.e. make sure to pass "--mode production" in the webpack build command.
使用OptimizeCSSAssetsPlugin缩小 css 资产，提取器仅用于分离输出资产。请注意，缩小适用于生产模式，即确保在 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
})
]
}
....}
回答by brk
With webpack version above 4 you may like to use mini-css-extract-plugininstead of ExtractTextPluginplugin
对于 4 以上的 webpack 版本，您可能更喜欢使用mini-css-extract-plugin而不是ExtractTextPluginplugin
回答by Jason Ching
You should use this plugin instead.
你应该改用这个插件。
回答by SHZhao74
Here is my config. I think you misuse use
这是我的配置。我认为你滥用use
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{....,
test: /\.(scss|sass)$/,
use: [
process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader, // creates style nodes from JS strings
{// translates CSS into CommonJS
loader: 'css-loader',
options: {
importLoaders: 1,
minimize: true
}
},
'postcss-loader',
"sass-loader" // compiles Sass to CSS
]
}
