Node v9 + Webpack v4 + extract-text-webpack-plugin = 编译错误

Question

//webpack.config.js -- shortened for convenience

const 
  ExtractTextPlugin = require("extract-text-webpack-plugin"),

  extractSass = new ExtractTextPlugin({
    filename: "Css/[name].css",
    allChunks: true
  }),

  //…
  config: {
    module: {
      rules: [
        //…
        {
          test: /\.scss$/,
          use: extractSass.extract([ 'css-loader', 'sass-loader' ])
        }
        //…
      ]

    },

    plugins: [
      extractSass
    ]
  }

  module.exports = config;

使用时：

         0% compiling(node:333) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:333) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead                                                                                                                                                   
        77% module and chunk tree optimization unnamed compat plugin/xxx/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 (/xxx/node_modules/webpack/lib/Chunk.js:460:9)
    at /xxx/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at /xxx/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/xxx/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:12:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/xxx/node_modules/tapable/lib/Hook.js:35:21)
    at Compilation.seal (/xxx/node_modules/webpack/lib/Compilation.js:881:27)
    at hooks.make.callAsync.err (/xxx/node_modules/webpack/lib/Compiler.js:464:17)
    at _err0 (eval at create (/xxx/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (/xxx/node_modules/webpack/lib/Compilation.js:749:12)
    at processModuleDependencies.err (/xxx/node_modules/webpack/lib/Compilation.js:688:9)
    at process._tickCallback (internal/process/next_tick.js:150:11)

在 webpack v4 之前，该设置是有效的。禁用该插件可以消除错误。我发现 webpack 的插件系统已经改变了，但我无法弄清如何修复该错误。

- philipp

Answer 1

如此处所述，问题在于extract-text-webpack-plugin需要升级才能与webpack v4兼容。因此：

npm install extract-text-webpack-plugin@next

肯定会解决这个问题。

- philipp

---

"@next" 是指哪个版本？它是否仍然需要？ - Colin D

这不是正确的答案，因为extract-text-webpack-plugin不应该用于css，而应该使用mini-css-extract-plugin - 请参见此页面上的其他答案。 - B--rian

Answer 2

看起来 extract-text-webpack-plugin 在 Webpack v4 中已弃用。请参见README，其中写道：

⚠️ 自 webpack v4 以来，不应将 extract-text-webpack-plugin 用于 css。请改用mini-css-extract-plugin。

有关此插件停用的更多信息，请查看这个问题：插件的未来 vs. Mini CSS Extract 插件。

- DoctorBud

Answer 3

请使用这个版本：

"extract-text-webpack-plugin": "^4.0.0-beta.0"

- Arunsai B K