angular-cli webpack.config.js 文件在哪里 - 新 angular6 不支持 ng eject

Question

更新：2018 年 12 月（参见 'Aniket' 回答）

对于 Angular CLI 6，您需要使用构建器，因为 ng eject 已被弃用，很快将在 8.0

中删除

更新：2018 年 6 月：Angular 6 不支持 ng eject**

更新：2017 年 2 月：使用 ng eject

更新：2016 年 11 月：angular-cli 现在只使用 webpack。您只需要使用 npm install -g angular-cli 正常安装即可。 "We changed the build system between beta.10 and beta.14, from SystemJS to Webpack."，但实际上我使用 angular-cli 只是为了第一个结构和文件夹，然后，我手动使用 webpack 配置

我已经安装了 angular cli：

npm install -g angular-cli@webpack

当我使用 angular1 和 web pack 时，我曾经修改 "webpack.config.js" 文件来执行所有的任务和插件，但我没有看到用 [= 创建的这个项目37=]-cli 谁做的。这是魔法？

当我这样做时，我看到 Webpack 正在运行：

ng serve 

"Version: webpack 2.1.0-beta.18"

但我不明白 angular-cli 配置的工作方式...

Answer 1

现在可以弹出 CLI 的 webpack 配置。检查 .

过时：

您可以破解 angular-cli/addon/ng2/models 中的配置模板。目前还没有正式的方法来修改 webpack 配置。

github 上有一个关于此的已解决“无法修复”问题：https://github.com/angular/angular-cli/issues/1656

Answer 2

根据这个issue，不允许用户修改 Webpack 配置以减少学习曲线是一项设计决定。

考虑到 Webpack 上有用的配置数量，这是一个很大的缺点。

我不建议将 angular-cli 用于生产应用程序，因为它非常自以为是。

Answer 3

有一个很好的方法可以从 angular-cli 中弹出 webpack.config.js。只是运行:

$ ng eject

这将在您的项目的根文件夹中生成 webpack.config.js，您可以随意配置它。这样做的缺点是 package.json 中的 build/start 脚本将被新命令替换，而不是

$ ng serve

你必须做类似

的事情

$ npm run build & npm run start

此方法应该适用于所有最新版本的 angular-cli（我个人尝试了几个，最旧的是 1.0.0-beta.21 , 以及最新的 1.0.0-beta.32.3)

Answer 4

我的想法是在产品发布时使用 webpack 会很容易。

仅供参考：https://github.com/Piusha/ngx-lazyloading

Answer 5

使用 Angular CLI 6，您需要使用构建器，因为 ng eject 已被弃用，很快将在 8.0 中删除。这就是我尝试执行 ng eject

时所说的内容

您可以使用 angular-builders 包 (https://github.com/meltedspark/angular-builders) 来提供您的自定义 webpack 配置。

我试图在我的博客上的一个博客 post 中总结所有内容 - How to customize build configuration with custom webpack config in Angular CLI 6

但本质上你添加了以下依赖项 -

  "devDependencies": {
    "@angular-builders/custom-webpack": "^7.0.0",
    "@angular-builders/dev-server": "^7.0.0",
    "@angular-devkit/build-angular": "~0.11.0",

在angular.json中进行如下修改-

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {"path": "./custom-webpack.config.js"},

注意构建器中的更改和新选项 customWebpackConfig。也改

    "serve": {
      "builder": "@angular-builders/dev-server:generic",

请再次注意服务目标生成器中的更改。 Post 这些更改你可以在你的同一个根目录中创建一个名为 custom-webpack.config.js 的文件并在那里添加你的 webpack 配置。

但是，与 ng eject 不同的是，此处提供的配置将与默认配置合并，因此只需将您想要的内容添加到 edit/add。

angular-cli webpack.config.js 文件在哪里 - 新 angular6 不支持 ng eject

angular-cli where is webpack.config.js file - new angular6 does not support ng eject

angular

webpack

angular-cli

过时：