Webpack 4 - 没有正确缩小 css 并正确丑化 js

Question

我已经为我的项目设置了 webpack。我想缩小 css 源。

以下是 webpack.config.js：

var webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
devtool: 'source-map',
mode: 'production',
entry: {
'target/web-resources/resources/lib/angular/angular.js': './node_modules/angular/angular.js',
'target/web-resources/resources/lib/angucomplete-alt/angucomplete-alt.js': './node_modules/angucomplete-alt/angucomplete-alt.js',
'target/web-resources/resources/lib/angucomplete-alt/angucomplete-alt.css': './node_modules/angucomplete-alt/angucomplete-alt.css',
},
module: {
rules: [
{
test: /.css$/,
use: [
"style-loader",
"css-loader"
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /.min.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: ['default', {discardComments: {removeAll: true}}],
canPrint: true
})
]
},
output: {
path: path.resolve(__dirname, '.'),
filename: '[name]'
}
};

但是它给我生成了这样的css文件：https://pastebin.com/rWWWvkGG(没有预期的扩展名.min.css - 只是.css(

同样原始的angucomplete-alt.js文件，它有27kB，它产生的文件是167kB。看起来它包含的不仅仅是原始代码：https://pastebin.com/E87pzTh0

Answer 1

module: {
rules: [
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader, // <---- this is missing
"css-loader"
]
}
]
},