使用 CLI 和 Webpack 4 构建的应用程序错误运行

Question

我使用 CLI 和 Webpack 构建了一个 Aurelia 应用程序。然后升级了两个。运行 au run 或 au run --env dev --watch 我在我的控制台中得到以下信息：

d:\projects\aurelia\aurelia-app\node_modules\tapable\lib\Tapable.js:63
                throw new Error(`Plugin could not be registered at '${name}'. Hook was not found.\n` +
        ^ Error: Plugin could not be registered at 'module'. Hook was not found. BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'.
    at Compiler.plugin (d:\projects\aurelia\aurelia-app\node_modules\tapable\lib\Tapable.js:63:9)
    at Compiler.deprecated [as plugin] (internal/util.js:52:15)
    at ModulesInRootPlugin.apply (d:\projects\aurelia\aurelia-app\node_modules\enhanced-resolve\lib\ModulesInRootPlugin.js:15:11)
    at Compiler.apply (d:\projects\aurelia\aurelia-app\node_modules\tapable\lib\Tapable.js:71:16)
    at Compiler.deprecated [as apply] (internal/util.js:52:15)
    at PathPlugin.apply (d:\projects\aurelia\aurelia-app\node_modules\awesome-typescript-loader\src\paths-plugin.ts:120:13)
    at webpack (d:\projects\aurelia\aurelia-app\node_modules\webpack\lib\webpack.js:37:12)
    at Object.<anonymous> (d:\projects\aurelia\aurelia-app\aurelia_project\tasks\build.ts:19:16)
    at Module._compile (module.js:635:30)
    at Object.require.extensions..ts (d:\projects\aurelia\aurelia-app\node_modules\aurelia-cli\lib\project.js:239:19)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (d:\projects\aurelia\aurelia-app\aurelia_project\tasks\run.ts:3:15)

我了解到 Webpack 4 中的更改破坏了与 plugins/loaders 的兼容性。但不确定 awesome-typescript-loader 是否兼容以及此加载程序是否导致问题。相关环境信息：

节点 8.9.1
npm 5.7.1
aurelia-cli 0.33.1
网络包 4.4.1
awesome-typescript-loader 4.0.1

TIA 寻求任何帮助，本尼

Answer 1

在不知道你的加载器的完整列表的情况下，我无法猜出它是哪一个 - 你可以通过查看你的哪个加载器没有有一个主要版本来推断它例如，过去 2-3 周。

可能是 awesome-typescript-loader，尽管他们现在似乎已经更新了。当 webpack 4 发布时我移动到 ts-loader 解决了这个问题。

升级到 webpack 4 的最简单方法是从头开始或多或少地构建你的 webpack.config，一个一个地复制部分，并在添加下一个之前让它们工作。

删除所有 text/css/json 内容并从打字稿开始，然后从那里开始工作。在我看来，这值得麻烦，因为 webpack 4 fast

您运行会/想要考虑的几件事：

各种优化插件（例如common chunks）已经转移到另一个命名空间
源地图大多已损坏（再次）
您需要将 webpack 配置的 mode 属性设置为 "development" 或 "production"（不再是 cli 参数）
ts-loader在速度上已经赶上（如果没有超过）awesome-typescript-loader，这本来是后者的主要卖点；可能是时候回到 "official" 一个
一些插件在导入时的行为似乎有点不同，例如我注意到我需要做 import HtmlWebpackPlugin from "html-webpack-plugin"; 而不是 import * as HtmlWebpackPlugin from "html-webpack-plugin";
升级有点像僵尸病毒。您现在需要升级一切。

Answer 2

在我的例子中，它是由不支持 Webpack 4 的旧插件 html-webpack-inline-chunk-plugin 引起的。删除它后，错误就消失了。

此外，有两个可能对未来的人有帮助：

使用 CLI 和 Webpack 4 构建的应用程序错误 运行

Error running app built with CLI and Webpack 4

webpack

aurelia

使用 CLI 和 Webpack 4 构建的应用程序错误运行