首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么只有供应商css是在生产模式下生成的,使用的是Webpack 4?

为什么只有供应商css是在生产模式下生成的,使用的是Webpack 4?
EN

Stack Overflow用户
提问于 2018-07-25 12:52:57
回答 1查看 618关注 0票数 0

下面是再现错误的存储库:https://github.com/sandrocsimas/webpack-bug

我使用的是webpack 4.16.1mini-css-extract-plugin 0.4.1

当我在生产模式下运行Webpack时,只生成了vendor.css包。开发模式生成main.css和vendor.css。这是我的Webpack配置:

代码语言:javascript
复制
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')}),
    ],
  };
};

我还注释了下面的几行代码,以找出是什么插件导致了这个问题,但问题仍然存在。

代码语言:javascript
复制
new CssOptimizePlugin({}),
devtool: isProduction() ? false : 'source-map',

我认为问题出在这一行:

代码语言:javascript
复制
mode: settings.env,

问题可能出在上面的代码行中,与css extract插件一起使用。

我该如何解决这个问题呢?

更新:

我不知道这是否重要,但这是Webpack的执行日志:

代码语言:javascript
复制
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将出现在以下位置:

代码语言:javascript
复制
[706] ./client/src/assets/styles/main.less 39 bytes [built]

在dist文件夹中搜索706,结果如下:

代码语言:javascript
复制
/***/ }),
/* 706 */,
/* 707 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

查看使用--stats生成的json,我发现了以下内容:

代码语言:javascript
复制
{
  "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解压出来的,但是捆绑包并没有保存。=(

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-31 07:24:01

要解决这个问题,您只需将less (或css)文件添加到package.jsonsideEffects属性中

代码语言:javascript
复制
"sideEffects": [
  "*.less",
  "*.css"
]
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51511034

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档