Webpack不对CSS文件的sideEffects生效

Question

我有一个JavaScript模块，导入了一个CSS文件。在Webpack的“开发”模式中，CSS已经包含在内了，但在“生产”模式中却没有。这是因为treeshaking认为CSS文件没有任何副作用。解决此问题的推荐方法是在package.json中添加"sideEffects": ["*.css"]，我已经执行了此步骤。为了确保，我还在webpack配置的CSS规则中添加了sideEffects属性。然而，CSS文件仍未被包含。我应该再做些什么呢？

从package.json中提取：

{
  "name": "psm",
  "version": "1.0.0",
  "description": "PRISM: Participatory System Mapping",
  "main": "prism.html",
  "sideEffects": ["*.css"],
  "scripts": {
    "dist": "webpack --mode=development",
    "build": "webpack --config webpack.prod.js",

来自webpack.prod.js的提取：

  module: {
    rules: [
        {
            test: /\.css/,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
            sideEffects: true
            },
        ],
    },      

导入语句是：

import "vis-network/dist/vis-network.min.css";

这里使用的是 npm 版本 6.1.4 和 webpack 4.42.1

- Nigel

---

我有类似的情况：https://dev59.com/_6j1oIgBc1ULPQZF41sp。对我来说，即使在开发中也无法正常工作。 - Steve Jorgensen

也许问题出在 *.css 而不是 **/*.css 上？ - Andreas Riedmüller

Answer 1

尝试在插件中添加新的MiniCssExtractPlugin()，如下所示

plugins: [
        new MiniCssExtractPlugin(),                     
        new WebpackManifestPlugin()
    ],

- shubham kedia