问题标签 [extracttextwebpackplugin]

我的 webpack.config.js 和 package.json 分别有以下配置：

和

但我无法生成 css 文件。我在这里缺少什么吗？

编辑 我更新的文件如下：

和

版本

"extract-text-webpack-plugin": "^2.0.0-rc.2",

"webpack": "^2.2.0",

“webpack-dev-server”：“^2.2.1”

问题

"extract-text-webpack-plugin": "^1.0.1",

"webpack": "^1.14.0",

“webpack-dev-server”：“^1.16.2”

自从升级到版本 2 后不再能够 HMR css/scss，更改样式会触发更改（请参阅下面的输出示例）但我必须手动刷新页面以查看页面不会自动刷新的更改，如果我也进行更改 scss 文件后更改为 js 文件，然后将更改反映为 js 更改触发 HMR，其中还包括样式更改，但仅更改没有 js 更改的样式需要手动刷新页面。

如果我配置错误或我需要做什么才能使 css/scss HMR 工作，有什么想法吗？

我还在这里发布了问题：https ://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384但不确定是 webpack-dev-server 问题还是 extract-text-webpack -plugin 问题或只是我做过的事情。

命令运行：

npm 运行开发

升级前的配置：

升级后的配置：

输出示例初始页面加载。

scss 更改后的输出样本。

您可以看到 main.css 的大小发生了变化，但在我按下 f5 之前页面从未刷新过

我正在使用 webpack 和 sass-loadercustom.css在我的公共目录中生成一个文件。我的 webpack.config 文件有以下内容：

// webpack.config.js

...

在 .views/index.html 文件中调用 css：

<link href="/css/custom.css" rel="stylesheet">

我的 package.json 中的开发脚本是：

在./components/App.js我有：

//stylesheets import scss from 'custom.scss'

但我收到以下错误：

我正在尝试从我的css相应wiki 部分中提取公共块。我知道此文档适用于webpack 1但webpack 2 似乎还没有相应的示例。我使用以下 webpack 配置：

我不明白为什么common.css在构建后不出现。只是common.js, foo.js,和. bar.js_ 我错过了什么吗？我是 webpack 的新手。foo.cssbar.css

谢谢。

我正在使用多个入口点（一个用于生成捆绑的 js 文件（main.js），另一个用于生成 css 文件（style.css）。我的 webpack.config.js 文件正在生成这两个文件，但也是一个style.js 文件，如何让它不生成 style.js 文件？

webpack.config.js：

ExtractTextPlugin 使用样式入口点来生成 css 文件，我不希望在捆绑输出中使用该入口点。有没有办法只将主（第一个）入口点用于输出？或者我应该改变我的方法来完全生成 style.css 文件？

当我使用以下语法时，我的样式没有加载

但是当我使用这样的模块时它们会加载（这是有道理的，因为我将css-loader modules选项设置为true）：

为了扩展上述内容，我将样式加载到 React 组件中，如下所示：

我知道我可以通过 轻松内联样式import '!style-loader!css-loader!sass-loader!../styles/loading-overlay.scss';，但我希望将它们导出到单独的组件 css 文件中。

我正在使用 Webpack 2.2.1 和 extract-text-webpack-plugin 2.0.0-rc.3

以下是 Webpack 配置的相关（AFAIK）部分：

任何想法为什么这可能不起作用？我需要提供任何其他信息吗？

当我尝试按照说明将 react-widgets-webpack 与 extract-text-webpack-plugin 和 Webpack 2 一起使用时，我收到以下错误：

./~/react-widgets-webpack/index.loader.js!./react-widgets.config.js 中的错误模块构建失败：错误：重大更改：提取现在只需要一个参数。选项对象或加载程序。示例：如果您的旧代码如下所示： ExtractTextPlugin.extract('style-loader', 'css-loader')

您可以将其更改为： ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })

更改为

给出以下错误：

./~/react-widgets-webpack/index.loader.js!./react-widgets.config.js 中的错误模块未找到：错误：无法解析'[object Object]，[object Object]，[object '/Users/pbirmingham/Development/FLA/forks/flash/flash' 中的对象]，[对象对象]'

我的 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

我正在为网站授权 Team City 构建配置（使用 VueJs 完成）。它使用纱线来构建网站，问题在于它用来捆绑最终资源的 web pack。

所以构建就像做一样简单yarn run build

该构建在本地运行良好。但是在 Team City 中，它在 css-loader webpack 任务中失败并出现以下错误。

我检查了几件事，例如；

• 比较节点版本（服务器有节点 4.x，而客户端有 6.x）
• 比较 npm 版本（两者都有 3.10.x）
• 比较本地和 Team City 服务器中的 node_modules
• 检查 .babelrc 文件在 Team City 中是否可用
• 检查服务器中的 node/npm 版本
• 在构建之前使用 npm cache clean 并执行全新的 npm install

由于我们不拥有此“代码”，因此我很难进行任何代码更改。我们也没有人有过 VueJs 或 WebPack 的经验。另一方面，它在本地工作。会不会是节点版本？

任何想法或指针都非常感谢。

我正在尝试根据本指南从 webpack 1 迁移到 2 。我进行了大部分更改，但在使用 ExtractTextPlugin 时遇到了困难。这是当前使用 webpack 1 的样子：

我对 webpack2 所做的更改：

但这会导致错误。我在哪里可以找到有关迁移这部分 webpack 配置的帮助。

我看到的一些错误：