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.