Webpack 不作用于 css 文件的副作用

Question

我有一个导入 CSS 文件的 javascript 模块。 CSS 包含在 webpack“开发”模式的构建中，但不包含在“生产”模式中。这是因为 Treeshaking 认为 CSS 文件没有任何副作用。处理这个问题的推荐方法是将

"sideEffects": ["*.css"]

添加到

package.json

，我已经这样做了。为了更好地衡量，我还在 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

Answer 1

尝试在插件中添加新的 MiniCssExtractPlugin() 如下图

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

Answer 2

所以我有两种可能的解决方案来解决上述问题

1. （推荐）您正在使用的 webpack 或 webpack cli 版本需要更新。我的代码在我更新版本后开始工作，如下所示

"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"

我升级到了

"webpack": "^4.47.0",
"webpack-cli": "^4.10.0"

2. 直接在config中添加css文件，通过入口设置。例如

entry: {
    'test1': [
        './src/my.js',
        './src/my.css',
            ],

希望这有帮助！