为什么在生产模式下使用Webpack 4只生成供应商css？

以下是再现错误的存储库：

我正在使用

webpack4.16.1

和

迷你css提取插件0.4.1

在生产模式下运行Webpack时，只生成vendor.css包。开发模式生成main.css和vendor.css。 以下是我的网页包配置：

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插件一起出现

我怎样才能解决这个问题

更新：

我不知道这是否重要，但这是网页包执行日志：

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似乎是由

迷你css提取插件

提取的，但是包没有保存=（

要解决此问题，只需将less（或css）文件添加到

package.json中的
sideEffects
属性：

"sideEffects": [
  "*.less",
  "*.css"
]