webpack init 尝试使用不受支持的 extract-text-webpack-plugin

Question

在使用 ASP.NET Core 和 Webpack 创建新的 Web 项目时，我收到来自 yarn 的关于 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 抛出新错误（ ^

错误：Chunk.entrypoints：使用 Chunks.groupsIterable 并过滤 instanceof 入口点代替 在 Chunk.get (D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Chunk.js:460:9) 在 D:\SRC\MISC\WebpackTest\node_modules\extract-text-webpack-plugin\dist\index.js:176:48 在 Array.forEach () 在 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) 在 _err0（创建时的评估（D:\SRC\MISC\WebpackTest\node_modules\tapable\lib\HookCodeFactory.js:24:12）， :11:1) 在 _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 (internal/process/next_tick.js:150:11)

---

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

"devDependencies": {
  "webpack": "^4.1.1",
  "webpack-cli": "^2.0.10"
},

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

Answer 1

我使用npm 也遇到过同样的问题，它的解决方法与纱线解决方案类似：

npm uninstall extract-text-webpack-plugin
npm i -D extract-text-webpack-plugin@next

Ref

作者说：

⚠️ 由于 webpack v4，extract-text-webpack-plugin 不应该用于 css。请改用 mini-css-extract-plugin。

Ref

Answer 2

在使用webpack-cli 提升an issue 后，此错误引用已在此pull request 中得到解决。

该修复程序已将包依赖项更新为 extract-text-webpack-plugin@next 并在本地对此进行了测试，我可以确认这不再在构建时引发错误。

yarn remove extract-text-webpack-plugin
yarn add --dev extract-text-webpack-plugin@next

Answer 3

您可以使用 mini-css-extract-plugin，我相信它应该替换为 webpack 4 的 extract-text-webpack-plugin。 https://www.npmjs.com/package/mini-css-extract-plugin

但要注意一些问题，例如在监视模式下破坏增量 css 重建，因为它目前只是一个 beta 版本。