javascript - TypeError：“编译”参数必须是编译的实例

问题描述

出于某种原因，我不得不使用angular-builders自定义 webpack。

当我将 webpack 版本更新为^5.11.0并尝试使用terser-webpack-plugin压缩代码时。

有一些错误抛出，但我不知道如何修复它。因为我配置了文档。

npm run build错误：

0% compiling
An error occurred during the build:
TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:119:10)
    at /Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/terser-webpack-plugin/dist/index.js:566:67
    at SyncHook.eval [as call] (eval at create (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:85:1)
    at SyncHook.lazyCompileHook (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/Compiler.js:662:28)
    at /Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/Compiler.js:321:11
    at Compiler.readRecords (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/Compiler.js:529:11)
    at /Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/Compiler.js:318:10
    at eval (eval at create (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at /Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/CachePlugin.js:50:13
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/Hook.js:154:20)
An unhandled exception occurred: The 'compilation' argument must be an instance of Compilation
See "/private/var/folders/zj/qw9n84kj6hsb0011brv_8c5w0000gn/T/ng-NaStay/angular-errors.log" for further details.
npm ERR! code 127
npm ERR! path /Users/kuubee/Desktop/self_porject/fontend/ng-blog
npm ERR! command failed
npm ERR! command sh -c ng build --prod

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kuubee/.npm/_logs/2020-12-28T05_51_41_395Z-debug.log

我的环境：

Angular CLI: 11.0.5
Node: 15.3.0
OS: darwin x64

Angular: 11.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.1
@angular-devkit/build-angular   0.1100.5
@angular-devkit/core            10.2.1
@angular-devkit/schematics      11.0.5
@angular/cdk                    11.0.3
@angular/flex-layout            11.0.0-beta.33
@angular/material               11.0.3
@schematics/angular             11.0.5
@schematics/update              0.1100.5
rxjs                            6.6.3
typescript                      4.0.5
webpack                         5.11.0

webpack.prod.config.js：

const {
  merge
} = require('webpack-merge');
const base = require('./webpack.config')
// if I annotate this line everything is ok
const TerserPlugin = require("terser-webpack-plugin");
module.exports = merge(base, {
// and below block
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      cache: true,
      parallel: true
    })],
  },
})

角.json：

{
...
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/ng-blog",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.json",
            "aot": true,
            "styles": [],
            "scripts": []
          },
          "configurations": {
            "production": {
              "customWebpackConfig": {
                "path": "webpack.prod.config.js",
                "mergeStrategies": {
                  "optimization": "replace"
                },
                "replaceDuplicatePlugins": false
              },
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": false,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "development": {
              "customWebpackConfig": {
                "path": "webpack.dev.config.js",
                "replaceDuplicatePlugins": true
              }
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "ng-blog:build:development"
          },
          "configurations": {
            "production": {
              "browserTarget": "ng-blog:build:production"
            },
            "development": {
              "browserTarget": "ng-blog:build:development"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ng-blog:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ng-blog:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ng-blog:serve:production"
            }
          }
        }
      }
...
}

标签： javascriptangulartypescript

javascript - TypeError：“编译”参数必须是编译的实例

问题描述

解决方案

推荐阅读