Webpack 如何在运行构建时禁用警告 - CSS

在运行 Webpack 进行构建时，有时我们会收到一些 CSS 相关的警告信息，这些警告信息可能是我们在编写 CSS 时出现了一些语法错误，也有可能是 Webpack 确定某些模块中存在无用的 CSS 代码。这些警告信息对于开发而言十分有用，但是在某些情况下，我们可能需要禁用这些警告信息。

下面将介绍如何在 Webpack 运行构建时禁用 CSS 相关的警告信息。

方法一：在 webpack.config.js 文件中添加配置

我们可以在 webpack.config.js 文件中添加以下配置来禁用 CSS 相关的警告信息：

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        sideEffects: false
      }
    ]
  },
  performance: {
    hints: false
  }
};

该配置将禁用所有的 CSS 相关的警告信息。其中，sideEffects: false 的作用是告诉 Webpack：某些模块不会产生副作用。这些模块可能只是在导出一些 CSS，并不实际导出代码。在启用了此选项后，Webpack 会在构建时判断哪些模块是有副作用的，并将它们的导出合并为一个文件。而对于没有副作用的模块，Webpack 则会扫描我们的代码，并删除其中没有被使用的部分，从而减小构建后的文件大小。

另外，performance: { hints: false } 的作用是禁用性能提示。在构建过程中，Webpack 会分析应用的性能，并给出相应的提示。这些提示包括代码块的大小、加载时间等等。在我们禁用了 CSS 相关的警告信息后，也需要禁用性能提示。这是因为禁用 CSS 相关的警告信息后，我们很可能会得到一些性能警告信息，而这些警告信息是我们不需要的。

方法二：在命令行中添加参数

除了在 webpack.config.js 文件中添加配置之外，我们还可以在命令行中添加参数来禁用 CSS 相关的警告信息。具体来说，我们可以在运行 Webpack 命令时添加以下参数：

webpack --display-modules --display-reasons --display-error-details --display-optimization-bailout --config webpack.config.js

这个命令会输出所有的模块信息、警告信息、错误信息和优化信息。而对于 CSS 相关的警告信息，Webpack 会将它们标记为“副作用模块”，从而告诉我们是哪个模块出现了问题。

总结

以上就是在 Webpack 运行构建时禁用 CSS 相关的警告信息的方法。无论是在 webpack.config.js 文件中添加配置还是在命令行中添加参数，都可以有效地禁用 CSS 相关的警告信息。但是需要注意的是，这些警告信息对于我们的开发工作来说是非常有用的，因此我们在禁用这些警告信息时需要谨慎。同时，我们需要时刻关注应用的性能，并适当地调整相关配置，以保证应用的性能和可维护性。