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

Question

我有一个导入 CSS 文件的 javascript 模块。CSS 包含在 webpack“开发”模式下的构建中，但不包含在“生产”模式下。这是因为 treeshaking 认为 CSS 文件没有任何副作用。处理此问题的推荐方法是添加 "sideEffects": ["*.css"]到package.json，我已经这样做了。为了更好地衡量，我还在sideEffectswebpack 配置中的 css 规则中添加了一个属性。但是，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()
    ],