问题标签 [extracttextwebpackplugin]

我在 Webpack 3 中使用 postcss、autoprefixer 和 extract-text-webpack-plugin，但是在编译时我缺少前缀。编译后的 css 仅包含 -webkit 前缀，而不包含 -ms 和 -moz 前缀。

我不确定我做错了什么。

我的配置：

我在 package.json 中的浏览器列表包含：

情况

我有一个 webpack 设置，其中我有一个规则，它使用和从.ts文件中提取 CSS 和/或 SASS 。extract-text-webpack-pluginsass-loader

我将我的 SCSS 文件导入到单独的.ts文件中

问题

CSS 文件应位于输出文件夹 ( dist) 中。
编译完成没有错误，但 build 文件夹中没有 CSS 文件。

这是我的 webpack 配置：

我在 SCSS 中编写样式，我想使用 webpack 来构建缩小和非缩小的 css 文件。所以我设置了我的 webpack.config.js：

但是在我运行之后npm run build，我得到了一些错误：

如果我的 webpack.config.js 是错误的？我该如何解决？

如果我使用的是开发模式，样式加载器可以正常工作。style但是当我构建项目并且我有 dist 文件夹时，我在标签中看不到head标签。有趣的是，只有当bundle.js文件以dist.

我的配置：

有谁知道什么会导致问题？谢谢。

我喜欢错误消息，它们非常有帮助（讽刺）

错误信息：

webpack 哈希：9ff6bc2b8b3cb641bb93 版本：webpack 3.11.0 时间：483ms 资产大小块块名称 bundle.js 2.83 kB 0 [emitted] main bundle.js.map 2.45 kB 0 [emitted] main index.html 188 bytes [emitted] [0 ] ./src/index.ts 320 字节 {0} [构建] [失败] [1 错误]

./src/index.ts 中的错误模块解析失败：意外令牌 (50:44) 您可能需要适当的加载程序来处理此文件类型。| setTimeout(() => { | getComponent().then(component => { |
document.body.appendChild(component as HTMLDivElement); |
}).catch((e) => { | console.log(e); “index.html”的子 html-webpack-plugin：1 资产 2 (webpack)/buildin/global.js 509 字节 {0} [built] [3] (webpack)/buildin/module.js 517 字节 {0} [内置] + 2个隐藏模块

webpack.config.js，示例代码取自webpack.js.org v3.11

包.json

tsconfig.json

我正在尝试使用 Extract Text Webpack 插件，但我无法为已编译的 sass 文件生成新的 css 文件。

webpack.config.js

包.json：

应用程序.js：

我有 scss 文件src/css，想通过 webpack 编译它。它似乎不起作用。可能的根本原因是什么？谢谢

我正在开发一个 Webpack 插件，它基本上css在块内查找资产，当它找到这样的资产时，在其上应用一些postCSS返回 2 个输出的插件，一个应该继续使用提取Extract-Text-Plugin，另一个输出应该成为一个新的在运行时将其注入头部的块中的模块。

我无法实现的唯一部分是在现有块中创建新模块的部分。有一些指示/想法？

我设法从中创建了一个新块，但没有 webpack 包装器，这意味着我无法支持该 css 的 HMR 并延迟加载它。

使用 ASP.NET Core 和 Webpack 创建新的 Web 项目时，我收到来自 yarn about 的依赖警告extract-text-webpack-plugin。

我的重现步骤：

1. dotnew new web
2. yarn init
3. yarn add --dev webpack webpack-cli
4. webpack init

将显示以下警告消息：

警告“ > extract-text-webpack-plugin@3.0.2”的对等依赖项“webpack@^3.1.0”不正确。

5. webpack

显示以下错误消息：

(node:19320) DeprecationWarning: Tapable.plugin 已弃用。在 '.hooks' 上使用新 API D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Chunk.js:460 throw new Error( ^

错误：Chunk.entrypoints：使用 Chunk.groupsIterable 并在 D:\SRC\ 的 Chunk.get (D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Chunk.js:460:9) 处按入口点的 instanceof 过滤MISC\WebpackTest\node_modules\extract-text-webpack-plugin\dist\index.js:176:48 at Array.forEach () at D:\SRC\MISC\WebpackTest\node_modules\extract-text-webpack-plugin\dist \index.js:171:18 在 AsyncSeriesHook.eval [as callAsync] （创建时的 eval (D:\SRC\MISC\WebpackTest\node_modules\tapable\lib\HookCodeFactory.js:24:12), :7:1）在 AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\SRC\MISC\WebpackTest\node_modules\tapable\lib\Hook.js:35:21) 在 Compilation.seal (D:\SRC\MISC\WebpackTest\node_modules\webpack\ lib\Compilation.js:881:27) 在 hooks.make.callAsync.err (D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Compiler.js:464:17) at _err0 (eval at create (D:\SRC\MISC\WebpackTest\node_modules\tapable\lib\HookCodeFactory.js:24:12), :11:1) at _addModuleChain (D:\SRC\ MISC\WebpackTest\node_modules\webpack\lib\Compilation.js:749:12) 在 processModuleDependencies.err (D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Compilation.js:688:9) 在 process._tickCallback （内部/进程/next_tick.js:150:11）

当前正在下拉的 webpack yarn 版本有：

我知道它extract-text-webpack-plugin还不支持 Webpack 4，所以我很好奇为什么要webpack init尝试包含它。是否有任何替代方案extract-text-webpack-plugin或者是回滚到 Webpack 3 的唯一解决方法？

我有一个使用 Webpack 4 的项目，它非常接近 preact-boilerplate repo，如下所示：https ://github.com/developit/preact-boilerplate/blob/master/webpack.config.babel.js#L50

就像该项目的设置方式一样，它使用 ExtractTextPlugin 并将“所有”输出 CSS 填充到 style.css 文件中。这很好，花花公子，但在一些小的边缘情况下。如果您在几分之一秒内注意到一个尴尬的白页，似乎 CSS 加载速度不够快，而且从性能预期来看，在标题中设置内联重要 CSS 样式更有意义。比如normalize.css，还有一些body属性。

TL;DR：有没有办法将我的src/style/或 normalize.css 与我的src/components/css 隔离为不同的输出类型？例如：src/style/将内联 HTML 在 head 中，而src/components/将使用 HtmlWebpackPlugin 在 style.css 中加载？

发布了一些代码以进行澄清。

编辑：我找到了https://github.com/numical/style-ext-html-webpack-plugin但是目前它似乎不支持 Webpack 4。