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

将显示以下警告消息：

警告">提取文本 Webpack-plugin@3.0.2"具有不正确的对等依赖项"webpack@^3.1.0"。

5. webpack

显示以下错误消息：

(节点：19320) 弃用警告：Tapable.plugin 已弃用。使用新的 API 改为".hooks" D：\SRC\MISC\WebpackTestode_modules\webpack\lib\Chunk.js：460 抛出新的错误( ^

错误：Chunk.entrypoints：使用Chunks.groups可迭代并筛选依据 入口点的实例 at Chunk.get (D：\SRC\MISC\WebpackTestode_modules\webpack\lib\Chunk.js：460：9) at D：\SRC\MISC\WebpackTestode_modules\extract-text-webpack-plugin\dist\index.js：176：48 at Array.forEach () at D：\SRC\MISC\WebpackTestode_modules\extract-text-webpack-plugin\dist\index.js：171：18 at AsyncSeriesHook.eval [as callAsync] (eval at create (D：\SRC\MISC\WebpackTestode_modules\tapable\lib\HookCodeFactory.js：24：12)， :7:1) at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D：\SRC\MISC\WebpackTestode_modules\tapable\lib\Hook.js：35：21) at Compilation.seal (D：\SRC\MISC\WebpackTestode_modules\webpack\lib\Compilation.js：881：27) at hooks.make.callAsync.err (D：\SRC\MISC\WebpackTestode_modules\webpack\lib\Compiler.js：464：17) at _err0 (eval at create (D：\SRC\MISC\WebpackTestode_modules\tapable\lib\HookCodeFactory.js：24：12)， :11:1) at _addModuleChain (D：\SRC\MISC\WebpackTestode_modules\webpack\lib\Compilation.js：749：12) at processModuleDependencies.err (D：\SRC\MISC\WebpackTestode_modules\webpack\lib\Compilation.js：688：9) 在process._tickCallback(内部/进程/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

在提出webpack-cli问题后，此错误引用已在此拉取请求中得到解决。

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

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

Answer 2

我在使用npm时遇到了同样的问题，它的解决方式类似于纱线解决方案：

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

裁判

作者指出：

⚠️ 由于 webpack v4，提取-文本-webpack-插件不应该用于 css。改用mini-css-extract-plugin。

裁判

Answer 3

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

但要注意一些问题，例如在观看模式下重建的增量 css 损坏，因为它目前只是一个测试版。

Answer 4

如果您在环境在 webpack 4 中时遇到安装提取文本 webpack-插件的问题，您只需执行以下操作：

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

但我还有一个问题：提取文本 webpack-插件的第 4 版是三年前完成的，为什么我执行 extract-text-webpack-plugin@4.0.0 这是错误的？