minicssextractplugin - Node v9+Webpack v4+extract-text-webpack-plugin=Error de compilación

npm i extract text webpack plugin next

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;

Cuando se utiliza:

         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)

Esa configuración estuvo funcionando hasta el webpack v4. Deshabilitar el complemento hace desaparecer el error. Descubrí que el sistema de complementos webpacks ha cambiado, pero no pude encontrar la manera de corregir ese error.

Answer 1

Como se describe here , el problema es que el extract-text-webpack-plugin necesita ser actualizado para poder trabajar con webpack v4 . Asi que:

npm install extract-text-webpack-plugin@next

sin duda resolverá el problema.

Answer 2

Parece que el complemento-texto-webpack-plugin está en desuso para Webpack v4. Ver el README , que dice:

Since️ Desde webpack v4, el plug-in-extract-text-webpack-plugin no debe usarse para css. Utilice mini-css-extract-plugin lugar.

Este problema El futuro de este complemento frente al mini complemento de extracción de CSS proporciona más información sobre la desaprobación.

Answer 3

Utilice esta versión "extract-text-webpack-plugin": "^ 4.0.0-beta.0",