这是重现错误的存储库：https ://github.com/sandrocsimas/webpack-bug
我正在使用webpack 4.16.1和mini-css-extract-plugin 0.4.1。
当我在生产模式下运行 Webpack 时，只会生成 vendor.css 包。开发模式同时生成 main.css 和 vendor.css。这是我的 Webpack 配置：
const webpack = require('webpack');
const CleanPlugin = require('clean-webpack-plugin');
const JsUglifyPlugin = require('uglifyjs-webpack-plugin');
const CssExtractPlugin = require('mini-css-extract-plugin');
const CssOptimizePlugin = require('optimize-css-assets-webpack-plugin');
const CssPurgePlugin = require('purgecss-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');
const rxjsPaths = require('rxjs/_esm5/path-mapping');
const path = require('path');
const glob = require('glob');
module.exports = (settings) => {
function isProduction() {
return settings.env === 'production';
}
const optimization = {
splitChunks: {
cacheGroups: {
vendor: {
name: 'vendor',
test: /\/node_modules\//,
chunks: 'all',
priority: 0,
enforce: true,
},
},
},
};
if (isProduction()) {
optimization.minimizer = [
new JsUglifyPlugin({cache: true, parallel: true}),
new CssOptimizePlugin({}),
];
}
return {
optimization,
mode: settings.env,
devtool: isProduction() ? false : 'source-map',
entry: {
vendor: path.resolve('client', 'src', 'vendor.ts'),
main: path.resolve('client', 'src', 'main.ts'),
},
output: {
path: path.resolve('dist'),
filename: '[name].js',
},
resolve: {
extensions: ['.ts', '.js'],
modules: [
path.resolve('client', 'src'),
path.resolve('node_modules'),
],
alias: rxjsPaths(),
},
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader', 'angular2-template-loader'],
include: path.resolve('client', 'src'),
},
{
test: /\.html$/,
use: ['html-loader'],
include: path.resolve('client', 'src'),
},
{
test: /\.css$/,
use: [CssExtractPlugin.loader, 'css-loader'],
include: [
path.resolve('node_modules', 'bootstrap', 'dist', 'css', 'bootstrap.css'),
path.resolve('node_modules', 'angular-calendar', 'css', 'angular-calendar.css'),
],
},
{
test: /\.less$/,
use: [CssExtractPlugin.loader, 'css-loader', 'less-loader'],
include: path.resolve('client', 'src', 'assets', 'styles'),
},
{
test: /\.(png|jpe?g|gif|svg|ico)$/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
context: path.resolve('client', 'src'),
},
}],
include: path.resolve('client', 'src', 'assets', 'img'),
},
{
test: /\.(woff(2)?|ttf|otf|eot|svg)$/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
context: path.resolve('client', 'src'),
},
}],
include: path.resolve('client', 'src', 'assets', 'fonts'),
},
],
},
plugins: [
new CleanPlugin(['dist'], {root: path.resolve()}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.DefinePlugin({
'process.env': {
API_URL: JSON.stringify(settings.apiUrl),
WEB_URL: JSON.stringify(settings.webUrl),
},
}),
new CssExtractPlugin({filename: 'assets/styles/[name].css'}),
new CssPurgePlugin({
paths: glob.sync(`${path.resolve('client', 'src')}/**/*`, {nodir: true}),
whitelist: ['modal', 'dropdown', 'alert', 'collapse', 'fade', 'show', 'd-block'],
whitelistPatterns: [/^modal-/, /^dropdown-/, /^alert-/, /^bg-/, /^cal-/],
}),
new HtmlPlugin({template: path.resolve('client', 'src', 'index.html')}),
],
};
};
我还评论了以下几行以查找导致此问题的插件，但问题仍然存在。
new CssOptimizePlugin({}),
devtool: isProduction() ? false : 'source-map',
我认为问题在于这一行：
mode: settings.env,
问题可能出在上面的行中，与 css extract 插件一起使用。
我该如何解决这个问题？
更新：
我不知道这是否重要，但这里是 Webpack 执行日志：
Hash: a7a7daf1fdd9b5397095
Version: webpack 4.16.2
Time: 48009ms
Built at: 2018-07-25 21:50:48
Asset Size Chunks Chunk Names
assets/styles/vendor.css 41.3 KiB 0 [emitted] vendor
vendor.js 5.45 MiB 0 [emitted] [big] vendor
main.js 385 KiB 1 [emitted] [big] main
index.html 523 bytes [emitted]
Entrypoint main [big] = assets/styles/vendor.css vendor.js main.js
[8] ./node_modules/@ng-bootstrap/ng-bootstrap/modal/modal.module.js + 6 modules 18.3 KiB {0} [built]
[22] ./node_modules/@angular/router/fesm5/router.js + 11 modules 222 KiB {0} [built]
[145] ./node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.module.js + 20 modules 103 KiB {0} [built]
[146] ./node_modules/angular-calendar/fesm5/angular-calendar.js + 13 modules 449 KiB {0} [built]
[215] (webpack)/buildin/global.js 489 bytes {0} [built]
[264] ./node_modules/@angular/core/fesm5 lazy namespace object 160 bytes {1} [built]
[446] ./node_modules/@ng-bootstrap/ng-bootstrap/timepicker/timepicker.module.js + 4 modules 18 KiB {0} [built]
[447] ./node_modules/@ng-bootstrap/ng-bootstrap/popover/popover.module.js + 3 modules 13 KiB {0} [built]
[449] ./node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.module.js + 2 modules 11.4 KiB {0} [built]
[450] ./node_modules/@ng-bootstrap/ng-bootstrap/alert/alert.module.js + 2 modules 2.93 KiB {0} [built]
[451] ./node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js + 1 modules 1.08 MiB {0} [built]
[452] ./node_modules/ngx-clipboard/fesm5/ngx-clipboard.js + 1 modules 25.7 KiB {0} [built]
[704] ./client/src/main.ts + 71 modules 202 KiB {1} [built]
[706] ./client/src/assets/styles/main.less 39 bytes [built]
[707] ./client/src/vendor.ts 95 bytes {0} [built]
+ 817 hidden modules
Main.less 出现在这里：
[706] ./client/src/assets/styles/main.less 39 bytes [built]
在 dist 文件夹中搜索706结果如下：
/***/ }),
/* 706 */,
/* 707 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
查看使用 --stats 生成的 json，我发现：
{
"id": 706,
"identifier": "/home/sandro/workspace/intercambio-website/node_modules/mini-css-extract-plugin/dist/loader.js!/home/sandro/workspace/intercambio-website/node_modules/css-loader/i
ndex.js!/home/sandro/workspace/intercambio-website/node_modules/less-loader/dist/cjs.js!/home/sandro/workspace/intercambio-website/client/src/assets/styles/main.less",
"name": "./client/src/assets/styles/main.less",
...
"depth": 1,
"source": "// extracted by mini-css-extract-plugin"
}
似乎 css 是由 提取的mini-css-extract-plugin，但捆绑包没有保存。=(