问题标签 [extract-text-plugin]

我有一个使用 Angular 的 webpack 的工作配置，以便将 scss 文件插入到 bundle.js 中

但后来我想获得一个包含应用程序中所有 scss 的单个 css 文件，所以我像这样使用 ExtractTextPlugin

现在，我没有使用“raw-loader”，因为我知道文件不必插入到 bundle.js 中，但我在编译时遇到错误。

如果我使用 raw-loader，构建会很好，但是在加载 index.html 时会出错

有谁知道如何解决这个问题以及为什么会这样？谢谢！

编辑

我一直在检查更多，我想我知道问题是什么，但我不知道如何解决它。

如果我使用这个配置

生成了 app.css，一切都很好。但是如果我检查 bundle.js 组件已经变成了这个

如果我检查模块 23 我发现它是空的

所以我猜这就是 angular 抱怨的问题，styles 是一个空数组。我认为这里应该做的是完全删除样式标签，因为 css 被用作外部分隔文件，对吧？有没有办法来解决这个问题？

我在我的项目中使用 webpack。我有 2 个入口点：第一个用于带有 CSS 模块的 CSS 文件，第二个用于全局 css 文件。Main.css 不是从项目中的任何文件导入的，所以我为它创建了一个特殊的入口点。

我只需要一个输出文件——styles.css。我知道 ExtractTextPlugin 为每个入口点生成一个包，但是有没有可能得到一个文件？

我正在尝试使用 webpack 2 实现 extract-text-webpack-plugin，并且我正在从头开始构建我的 webpack.config.js。当我想添加插件时，我按照npm上的说明进行操作。然而，这给了我以下错误：

TypeError: Cannot read property 'query' of undefined

我环顾四周，没有发现其他人对这个插件有同样的问题。在假设这是一个错误之前，我宁愿先问我是否犯了错误。

我的 webpack.config.js 是

完整的错误是

在尝试在我们的应用程序中实现页面优化时，我们希望能够为每个 webpack 块生成单独的 CSS 文件，以提高应用程序第一页的页面渲染性能。为此，我们一直在尝试将 extract-text-plugin 与 require.ensure 结合使用，如下所示：

app.js 是：

和 a.css 是：

b.css 是：

和 c.ss 是：

问题是我们只得到一个dist/app.e2e9da337e9ab8b0ca431717de3bea22.css包含所有 3 个块内容的 CSS 文件：

在这种情况下，我们如何为每个 webpack 块（require.ensure）提取一个 css 文件？这是否应该得到提取文本插件的支持。

PS：这是一个演示此问题的示例存储库——https: //github.com/osdevisnot/extract-text-demo

如果在公共块中导入 scss 文件时，如果该公共块还导入一个异步/动态 js 块，该块导入另一个 scss 文件，则似乎存在一些问题。

上述文件设置错误

我打开了一个包含完整详细信息和复制步骤的问题

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/456

我有几个 CSS 入口点：

我正在使用 ExtractTextPlugin 分别捆绑 CSS：

所以就像输出一样，我有 2 个 CSS 文件：styles.css和fonts.css是正确的，但也是空的 styles.js和fonts.js。有没有办法不生成空的JS文件？

我正在创建一个“angular2”应用程序，并且为每个组件导入一个特定的 CSS 文件。我没有使用“styleUrls”，因为我希望将所有 CSS 捆绑在一个大文件中，而不是在标题中包含多个“style”标签。

现在，问题是在每个 CSS 文件中，我都有一些媒体查询来确保组件是响应式的。我注意在我的不同组件 CSS 文件中使用相同的媒体查询。

我还使用“webpack”和“extractTextPlugin”来创建一个大的 CSS 文件，我希望能够将所有相同的媒体查询组合在一起。我找到了“group-css-media-queries-loader”包，但我无法让它工作。我怀疑它会在每个块而不是捆绑包上触发。这是我的“webpack.config.js”文件的相关部分：

我在我的 Angular 2 项目中使用Webpack模块捆绑器。我需要使用webpack. 我已经使用npm. 这是我的快照package.json

这是我的webpack.common.js：

当我运行npm run build命令时。一切正常，但我收到以下错误bootstrap。

我不确定我错过了什么。我用谷歌搜索了它，但找不到任何解决方案。任何人都可以请帮忙。谢谢。

我想要实现的是：我有一个快速服务器，它在 webhook 上应该重新生成我的静态生成的 web 应用程序。我正在使用 webpack 来做到这一点。如果我从 webpack 的 CLI 生成静态站点，一切都像魅力一样。但是，如果我从节点内导入 webpack 配置，我会收到 Webpack 选项验证错误：

调试了一下，我发现在我使用WebpackExtractTextPlugin的地方添加了一个加载器，即加载器：

{ loader: 1178, options: [Object] }

这是我共享的 webpack.js 的样子：

我webpack.static.js将上述内容与此合并：

有谁知道那个额外的装载机可能来自哪里，或者我做错了什么来结束这个问题？

我正在使用：webpack@2.2.1 extract-text-webpack-plugin@2.1.0

在为一个项目锁定了一个古老的技术堆栈几年之后，我终于有机会探索更多当前的框架并涉足 React 和 Webpack。到目前为止，这在很大程度上是一种令人耳目一新且令人愉快的体验，但是我在使用 Webpack 时遇到了一些困难，我希望蜂巢思维可以帮助解决。

我一直在仔细研究 Webpack 2.0 文档并进行了非常详尽的搜索，但结果很短（我只提出了这个问题，它很接近，但我不确定它是否适用）。那里缺乏信息使我认为我正在考虑以下两种情况之一：

1. 我正在尝试做的事情是疯狂的。
2. 我正在尝试做的事情很简单，以至于它应该是不费吹灰之力的。

...然而，我在这里。

我正在寻找的简短版本是一种基于环境变量将某些 JSX 组件排除在 Webpack 构建/捆绑包中的方法。目前，无论依赖关系树根据imported条目 js 向前的内容应该是什么样子，Webpack 似乎都希望将所有内容捆绑在项目文件夹中。

我有点假设这是默认行为，因为它有一定的意义——应用程序可能需要处于初始状态以外的状态的组件。但是，在这种情况下，我们的“应用程序”是完全无状态的。

为了提供一些背景知识，以下是该项目的一些粗略要求：

• 项目包含一组组件，这些组件可以组装到一个页面中，并根据配置文件给出一个主题。
• 这些组件中的每一个都包含自己的模块化 CSS，用 SASS 编写。
• 每个导出的页面都是静态的，并且捆绑包实际上已从导出目录中删除。（是的，如果项目以简单地渲染一系列单一的、静态的页面结束，React 有点过头了。项目的未来状态将包括在此之上的 UI，React 应该非常适合，但是-- 所以最好现在用 JSX 编写这些组件。）
• CSS 是从包中提取的extract-text-webpack-plugin- 在最终导出的元素上没有直接内联样式，这不是可以更改的要求。
• 作为页面主题信息的一部分，设置了 SASS 变量，然后 SASS 将这些变量用于每个 JSX 组件。
• 只有在给定页面的配置文件中引用的 JSX 组件的 SASS 变量才会被编译和传递，sass-loader以在编译 CSS 时使用。

这就是事情发生的地方：

假设我有 5 个 JSX 组件，方便地命名为component_1、component_2、component_3等等。其中每一个都有一个.scss与之关联的匹配文件，包括在以下方式中：

现在假设我们有两个页面：

• page_1包含component_1和component_2
• page_2包含component_3, component_4, 和component_5

这些页面都是使用一个通用layout组件构建的，该组件以如下方式决定使用哪些块：

上面迭代了一个包含我需要的 JSX 组件（对于给定页面）的对象，现在以以下方式创建它：

所以一般流程是：

1. 从页面配置中收集包含的组件列表。
2. 创建一个require对每个此类组件执行 a 的对象，并使用组件名称作为键存储结果。
3. 单步执行该对象并将这些 JSX 组件中的每一个都包含到layout.

所以，如果我只是遵循依赖树，这应该一切正常。然而，Webpack 试图包含我们所有的组件，而不管layout实际加载的是什么。由于我只为页面上实际使用的组件加载 SASS 变量，这会导致 Webpack在尝试处理与未使用模块关联的 SASS 文件undefined variable时抛出错误。sass-loader

这里需要注意的一点是：静态页面渲染得很好，甚至可以在 Webpack 的开发服务器中工作……我只是遇到了很多错误，而 Webpack 则很适合。

我最初的想法是，可以在我用于 JSX 文件的加载器的配置中找到解决方案，如果 Webpack 试图加载所有内容，我可能只需要告诉加载器不加载什么。我为此使用了`babel-loader：

那里的exclude条目是新的，并且似乎不起作用。

所以这有点像中篇小说，但我想在信息太多的一面犯错，而不是太少。我错过了一些简单的事情，还是想做一些疯狂的事情？两个都？

如何让未使用的组件不被 Webpack 处理？