我正在尝试配置mini-css-extract-plugin为在构建后从 SCSS 生成单个或多个 CSS 文件，但似乎我对 webpack 不是很熟悉，并且在某个地方失败了。

使用 "webpack": "^4.29.0", "mini-css-extract-plugin": "^0.5.0" 我设法生成的是 JS 文件，它们应该是 CSS 文件。

我希望能够生成一个大的单个 CSS 文件或多个 CSS 和文件块。

问题

是否有任何 Webpack 配置专家能够告诉我为什么我不能在运行时将我的 css 提取到 dist 文件夹中npm run build？回购在这里：https ://github.com/damodog/webpack4-boilerplate

更多信息

总而言之，我一直在研究Webpack Guide 文档，一切进展顺利。js 和 css 分别通过<link>和<script>标签注入到我的 index.html 文件中。我已经安装了各种加载器、插件等，并将我的配置分成通用（共享）、开发和产品文件（根据文档），生活很好。

我碰巧做了一些调整，包括查看代码拆分动态导入npm run build、为路径添加别名、将 js 移动到 js 文件夹等，并注意到当我突然运行构建时，我的 css 没有被添加到 dist 文件夹中。我恢复了动态导入内容的试用更改，并尝试恢复其他更改，但仍然遇到同样的问题。令人讨厌的是，此时我还没有添加 git，所以没有清楚地了解我为找到我所做的更改所做的“调整”。

发生什么了

当我运行我的监视任务npm start时，styles.scss 文件（导入到主 index.js 文件中）被编译到 css 中，并且在我的本地主机中查看时，生成的 app.css 文件被注入到 index.html 页面中。所有的肉汁。 <link href="css/app.css" rel="stylesheet">

当我运行npm run buildcss 文件应该被复制到 dist 文件夹时，应该添加一个哈希 id 并且 css 应该被缩小。这是有效的（就像我上面说的那样），我可以在构建步骤中看到 css 文件（参见下面的第一个资产。顺便说一句，与下一个屏幕截图相比，这里忽略了 js 捆绑文件的差异。这是我玩代码拆分的时候）。

现在，当我运行它时，css 没有捆绑在一起（见下文）。

我认为这可能与 mini-css-extract-plugin 有关，但我已根据文档使用高级配置示例进行了配置（我已将他们的示例拆分为一个配置文件，因为我有单独的配置dev 和 prod 的文件）。

我真的不明白为什么会这样。帮助我的读者。你是我唯一的帮助...

我正在使用使用最新版本的 vue cli 3 创建的项目。我使用的是默认配置，我的路由器有很多动态导入的路由。在生产中运行时，我的 css 和 js 都被分成多个块。虽然 js 的行为是可取的。我的 css 文件很小，我想关闭 css 的块。

如何通过 vue.config.js 文件配置 webpack 以执行此操作。请帮助使用确切的命令，因为我发现 webpack 配置和链语法非常混乱。谢谢 :)

我有以下 webpack 设置：

结果是一个文件夹，其中每个 .ts 文件都有一个 .js 文件，每个 .scss 文件有 2 个文件。（main_scss.scss 产生 main_scss.bundle.js 和 main_scss.css）

为什么？我希望 .scss 文件仅捆绑到 .css 中。

谢谢亚龙

想要运行 webpack，它在使用 mini-css-extract-plugin 后在 html 文件的标头中创建适当的样式表链接——类似于 html-webpack-plugin 如何将适当的 JS 包（脚本标签）添加到的HTML。是否可以让 webpack + 插件执行此操作，还是我必须手动粘贴样式表标签（在 html 模板中）？

运行 webpack 4.28

我有一个 Webpack + Angular 项目，我希望在组件样式旁边有一个单独的全局样式表，类似于 angular-cli 开箱即用的功能。我正在为组件样式使用 sass，并希望拥有一个全局顺风构建的样式表。我希望使用 MiniCssExtractPlugin 之类的东西将全局样式模块提取到头部。问题是我在尝试执行此操作时收到“未定义窗口中的错误”。这是我的 webpack 样式配置，它按预期加载组件样式：

为了添加一个全局 tailwind 模块，我添加了另一个指向 sass 文件的 webpack 条目：

和 postcss 加载器像这样：

构建项目时出现“未定义窗口中的错误”。我的配置有什么问题？

我在用着

• macOS 莫哈韦 10.14 (18A391)
• Node.js 11.13.0
• npm 6.7.0
• 网络包 4.29.6
• CSS加载器2.1.1
• 萨斯 1.17.3
• 萨斯加载器 7.1.0
• 迷你 CSS 提取插件 0.5.0

预期行为

呈现的 HTML

CSS 类按我想要的方式呈现

实际行为

源代码

SCSS

JSX

呈现的 HTML

CSS 类按我不想要的方式呈现

而不是 m_x_@ 我得到了 m_x_----wB9u （转义错误）

webpack.config.js

webpack.config.js

如您所见，我在 webpack 配置“博客”中只有一个条目，该条目解析为./src/blog.js具有以下内容：

当我运行webpack --config webpack.config.js它时，它会按预期构建，./web/_assets/js/blog.21342i1j4h1kj.bundle.js其中包含console.log(1)。

然而奇怪的是，它还构建./web/_assets/js/1.21342i1j4h1kj.bundle.js和./web/_assets/css/1.21342i1j4h1kj.bundle.js

额外的 JS 文件包含

并且 1.css 文件包含 sass 到 css 编译的 css。

我的问题是：

• 为什么会存在多余的 JS 文件？
• 为什么不调用css文件blog.21342i1j4h1kj.bundle.css？
• 如何更改配置以解决此问题？

如何为我的古腾堡块设置 webpack 以提取多个 css 文件并根据样式表的名称捆绑这些文件。

Zack Gordon 在 webpack 3 中使用了 Extract Text Plugin ，这就像一个魅力。但是对于 webpack 4，我不得不切换到 mini-css-extract-plugin，我无法再让它工作了。

请参阅下面的当前设置，以便您了解我正在尝试做的事情。

这是我的项目文件夹：

在 block1.js / block2.js 中：

在 index.js 中：

在 webpack.config.js 中：

预期输出：

电流输出：

当前的设置会产生两个我不需要的额外 js 文件（style.js/editor.js），但最大的问题是它还会导致块无法在 Wordpress 中加载。当我不使用 splitChunks 时它会加载，但是所有 css 都捆绑在一个文件中......我需要两个。

比较：没有 splitChunks 的 index.js：

index.js 与 splitChunks：

我是 webpack 的新手，并且遵循一些教程来学习基础知识。

我想style-loader在开发过程中使用注入样式表（启用 HMR）并希望MiniCssExtractPlugin用于生产构建。但是当我使用 MiniCssExtractPlugin 插件时，我失去了样式加载器的注入功能。

请查看我的 webpack 配置：