Chunk.entrypoints : Chunks.groupsIterable을 사용하고 대신 Entrypoint 인스턴스별로 필터링합니다.


91

앱을 시작하려고 할 때 다음 오류가 표시됩니다.

> css-modules@1.0.0 start /Users/johnnynolan/Repos/css-modules

webpack && open index.html

(node:5706) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Chunk.js:802
        throw new Error(
        ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Chunk.js:802:9)
    at /Users/johnnynolan/Repos/css-modules/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at /Users/johnnynolan/Repos/css-modules/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/johnnynolan/Repos/css-modules/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/johnnynolan/Repos/css-modules/node_modules/tapable/lib/Hook.js:35:21)
    at Compilation.seal (/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Compilation.js:1203:27)
    at hooks.make.callAsync.err (/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Compiler.js:547:17)
    at _err0 (eval at create (/Users/johnnynolan/Repos/css-modules/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Compilation.js:1054:12)
    at processModuleDependencies.err (/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Compilation.js:980:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! css-modules@1.0.0 start: `webpack && open index.html`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the css-modules@1.0.0 start script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/johnnynolan/.npm/_logs/2018-07-17T14_04_42_021Z-debug.log

css-modules가 무언가를 던질 수 있습니다. 전체 스택 추적 및 웹팩 구성 게시
— PlayMa256

"어떻게이 문제를 해결할 수 있습니까?"라는 줄에 따라 질문을 더 수정하는 것이 좋습니다. "이전에 본 사람이 있습니까?"대신
— 에이미

3
extract-text-plugin이 Webpack v4에서 작동하지 않음
— IVO GELOV

답변:


190
npm install extract-text-webpack-plugin@next

이것은 나를 위해 트릭을했습니다!


1
@next는 정확히 내가 필요한 "^ 4.0.0-beta.0"을 가져 왔습니다. 감사합니다.
— Paula Fleck

82

여기에 의견의 대부분 https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701 가리킨 extract-text-plugin로 변경 mini-css-extract-plugin하는 대신.

https://github.com/webpack-contrib/extract-text-webpack-plugin 의 Github 저장소에서extract-text-webpack-plugin

⚠️ webpack v4 이후 css에 extract-text-webpack-plugin을 사용해서는 안됩니다. 대신 mini-css-extract-plugin을 사용하십시오.

로 향할 mini-css-extract-plugin/ 스왑하는 방법으로 업그레이드 https://github.com/webpack-contrib/mini-css-extract-plugin을


21

예, webpack에서 동일한 문제가 발생했습니다 4.10.2. 을 (를) 바꾸면 문제가 해결 extract-css-chunks-webpack-plugin됩니다 mini-css-extract-plugin.

다음은 웹팩 구성 변경 사항입니다.

-const ExtractCssChunks = require('extract-css-chunks-webpack-plugin')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  name: 'client',
  target: 'web',
  module: {
    rules: [
      {
        test: /\.css$/,
-       use: ExtractCssChunks.extract({
-         use: 'css-loader'
-       })
+       use: [
+         {
+           loader: MiniCssExtractPlugin.loader,
+         },
+         "css-loader"
+       ]
      }
    ]
  },
// 
// other config........
//
   plugins: [
-    new ExtractCssChunks(),
+    new MiniCssExtractPlugin({
+        filename: `components/[name].css`
+    }),
     //
     // other config........
     //
   ]

도움이되기를 바랍니다.


실제로 위의 답변보다 더 많은 도움이되었습니다. 감사합니다.
— Paolo Stefan

7

버전 4.0.0-beta.0을 사용하여 버그를 수정했습니다 extract-text-webpack-plugin.


4
4.0.0-beta.0로 업데이트도 내 문제 해결
— JillAndMe

VS Code에는 4.x에 대한 자동 완성 기능이 없었으므로 명시적인 버전으로 다른 Google 검색을 저장해 주셔서 감사합니다.
— steven87vt

그게 무슨 길이야?
— Grald
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.