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

Question

当使用 ASP.NET Core 和 Webpack 创建一个新的 Web 项目时，我从 yarn 收到关于 extract-text-webpack-plugin.

的依赖警告

我的重现步骤：

dotnew new web
yarn init
yarn add --dev webpack webpack-cli
webpack init

显示以下警告消息：

warning " > extract-text-webpack-plugin@3.0.2" has incorrect peer dependency "webpack@^3.1.0".

webpack

显示以下错误消息：

(node:19320) DeprecationWarning: Tapable.plugin is deprecated. Use new API on '.hooks' instead D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Chunk.js:460 throw new Error( ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get (D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Chunk.js:460:9) at D:\SRC\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 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\SRC\MISC\WebpackTest\node_modules\tapable\lib\HookCodeFactory.js:24:12), :7:1) at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\SRC\MISC\WebpackTest\node_modules\tapable\lib\Hook.js:35:21) at Compilation.seal (D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Compilation.js:881:27) at 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) at processModuleDependencies.err (D:\SRC\MISC\WebpackTest\node_modules\webpack\lib\Compilation.js:688:9) at 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

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

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

Answer 2

加注后an issue with webpack-cli this bad reference has been addressed in this pull request.

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

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

Answer 3

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

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

Ref

尽管作者声明：

⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

Ref

Answer 4

如果你的环境是webpack 4的时候安装extract-text-webpack-plugin有问题，你只需要按如下操作：

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

但我也有一个疑问：extract-text-webpack-plugin的第4版是三年前完成的，为什么我执行extract-text-webpack-plugin@4.0.0会报错？

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

webpack init trying to use unsupported extract-text-webpack-plugin

webpack

asp.net-core

yarnpkg

extracttextwebpackplugin