运行使用 CLI 和 Webpack 4 构建的应用程序时出错答案

【问题标题】：Error running app built with CLI and Webpack 4运行使用 CLI 和 Webpack 4 构建的应用程序时出错
【发布时间】：2018-04-01 11:03:25
【问题描述】：

我使用 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 中破坏与插件/加载器兼容性的更改。但不确定 awesome-typescript-loader 是否兼容以及此加载程序是否会导致问题。相关环境信息：

节点 8.9.1
npm 5.7.1
aurelia-cli 0.33.1
webpack 4.4.1
很棒的打字稿加载器 4.0.1

TIA 寻求帮助，本尼

【问题讨论】：

标签： webpack aurelia

【解决方案1】：

在不知道您的加载器的完整列表的情况下，我无法猜测它是哪一个 - 您可以通过查看您的加载器中的哪个没有在例如，过去 2-3 周。

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

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

删除所有 text/css/json 内容并从 typescript 开始，然后从那里开始工作。 imo 值得麻烦，因为 webpack 4 快速

您会遇到/想要考虑的一些事情：

各种优化插件（如常用块）已移至另一个命名空间
源地图大多损坏（再次）
您需要将 webpack 配置的 mode 属性设置为“开发”或“生产”（不再是 cli 参数）
ts-loader 在速度方面已经赶上了（如果没有超过）awesome-typescript-loader，这原本是后者的主要卖点；可能是时候回到“官方”了
某些插件在导入时的行为似乎有些不同，例如我注意到我需要做import HtmlWebpackPlugin from "html-webpack-plugin"; 而不是import * as HtmlWebpackPlugin from "html-webpack-plugin";
升级有点像僵尸病毒。您需要立即升级所有内容。

【讨论】：

感谢@fred-kleuver 的回答。我会检查我的清单并使用你的指导方针。我使用awesome-typescript-loader 只是因为aurelia-cli 在创建新的打字稿项目时安装它。我同意 webpack 4 值得付出努力，尽管插件/加载器生态系统由于重大变化需要迎头赶上。
是的，aurelia-cli 安装了它，因为当他们第一次把它放在一起时，awesome-typescript-loader 只是完成这项工作的更好工具。我认为它不再是了，因此我离开了它（事实上我根本不再使用 aurelia-cli，我只是直接从 npm 调用 webpack）。无论如何，不要害怕换掉 aurelia-cli 提供的默认值。关于 webpack 没有硬依赖，唯一的例外是 aurelia-webpack-plugin
我很高兴aurelia-cli 为我做工具，让我专注于我的代码。否则我对任何特定的装载机都没有感情。如果ts-loader 是一个实时项目并且做得很好，那就太好了。
和@fred-kleuver 顺便说一句，直到最近我使用 Aurelia 的 webpack 项目模板来启动一个项目。但后来我想检查aurelia-cli，因为我认为它已经成熟并采用 webpack 作为首选捆绑器。我想了解aurelia.json 的工作原理（还没有）。我希望找到最适合我并且需要最少的工具工作的公式。
考虑到 aurelia-cli 仍然是版本 0（甚至还不是 alpha 或 beta），我不会称之为成熟。捆绑的方式仍然存在很多不确定性。如果你想要一个使用 webpack 设置（aurelia-cli-free）的工作示例，请查看我的插件框架：github.com/fkleuver/aurelia-plugin-skeleton-ts-webpack（特别是 webpack.config.ts）

【解决方案2】：

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

另外，还有两个可能对未来的人有所帮助：

【讨论】：