Webpack 和 MiniCssExtractPlugin 不捆绑 CSS 文件答案

【问题标题】：Webpack and MiniCssExtractPlugin does not bundle CSS filesWebpack 和 MiniCssExtractPlugin 不捆绑 CSS 文件
【发布时间】：2019-12-31 21:25:29
【问题描述】：

我正在尝试按照这里的手册进行操作：https://webpack.js.org/plugins/mini-css-extract-plugin/

我的配置与那里所说的完全相同。我的目标是生成一个 CSS 文件，它是位于 src/css/ 文件夹中的多个 CSS 文件的捆绑包。

运行构建时，dist/ 文件夹中没有收到任何 CSS 文件。

我想我错过了如何将 CSS 文件实际包含到构建中。这些 CSS 文件在我的代码中的任何地方都没有引用，它们是由在文档中附加 <link> 标记的 JavaScript 动态注入的。

当我的代码中没有明确引用 CSS 文件时，我如何让 webpack 拾取和捆绑 CSS 文件？

【问题讨论】：

Webpack 没有提供这样做的方法，您必须在文件中引用。这是一篇解释 webpack 工作原理的文章：medium.com/@matheus_gsilva/…

标签： webpack mini-css-extract-plugin

【解决方案1】：

我发现了这个 - 文档中没有提到这种语法。

您可以在任何 JavaScript 文件中提及 CSS 文件，然后 MiniCssExtractPlugin 会提取它。示例：

import './css/button.css';
import './css/chat.css';

【讨论】：

【解决方案2】：

@user6269864 它引用了 mini-css-extract-plugin 中描述的第二句：

它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。

为了在 Js 文件中包含 CSS，webpack 通过如下基本配置提供导入：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

以上配置在他们的文档中，其中还包括如何导入：import css from 'file.css';Webpack css-loader

【讨论】：