Webpack 版本： 4.16.3
所有编译均成功。
我的代码在捆绑包中编译后.css没有缩小。
我尝试在文本-webpack-插件中使用最小化：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 资产，提取器仅用于分离输出资产。请注意，缩小适用于生产模式，即确保在 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
})
]
}
....}
对于 webpack 版本 4 以上，您可能希望使用mini-css-extract-plugin而不是ExtractTextPlugin插件
完整的工作 Webpack 5 示例
下面是一个完整的示例。不区分生产和开发，但应该做起来很简单。
它生成dist/main.css这是一个缩小的 CSS，包含两者：
- 我们的
main.scss normalize.css通过node_modules
两者的效果可以在索引.html测试文件上看到。
webpack.config.js
const path = require('path');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
module.exports = {
entry: {
main: ['./main.scss'],
},
mode: 'none',
module: {
rules: [
{
test: /.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "sass-loader",
options: {
sassOptions: {
includePaths: [nodeModulesPath],
},
},
},
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
minimize: true,
}
};
包.json
{
"name": "webpack-cheat",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "webpack",
"sass": "rm -f dist/main.css && sass main.scss dist/main.css"
},
"author": "Ciro Santilli",
"license": "MIT",
"devDependencies": {
"css-loader": "5.2.4",
"css-minimizer-webpack-plugin": "3.0.2",
"mini-css-extract-plugin": "2.1.0",
"normalize.css": "8.0.1",
"sass": "1.32.11",
"sass-loader": "11.0.1",
"style-loader": "2.0.0",
"webpack": "5.36.1",
"webpack-cli": "4.6.0",
"webpack-dev-server": "3.11.2"
}
}
主.scss
@use "normalize.css/normalize.css";
body {
background-color: red;
}
索引.html
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Sass import</title>
<link rel="stylesheet" href="dist/main.css">
</head>
<body>
<p>Hello</p>
</body>
</html>
你应该改用这个插件。
https://github.com/NMFR/optimize-css-assets-webpack-plugin