angular-cli@webpack 是如何工作的？

Question

我在 systemJS 中使用过 angular-cli，现在对它的构建过程、测试用例和组件交互感到满意。

最近我将angular-cli 升级为angular-cli@webpack。

但我对以下事情感到很困惑：

1. webpack 构建过程是如何工作的？
2. 如何使用此 webpack 配置安装 lodash,ng2-bootstrap 等第三方库，因为我看不到任何 webpack.config.ts 文件。
3. 为什么它没有显示任何包含我的应用程序的 JS 文件的包？
4. 我只能看到我的应用程序的打字稿文件..为什么？

提前致谢。

Answer 1

1. 当你运行ng build 时，它将构建所有内容并将文件输出到 Dist 文件夹
2. 只需运行 npm install 'external-dependency' 即可，只需将其导入您需要的文件中（以及 app.module.ts 中）
3. 你需要先运行ng build，见1
4. 见 1

Answer 2

1. webpack 读取条目并构建到所需的输出。这是一个例子

    entry: {
           'app': './main.ts'//your entry point
    }, output: {
      path: helpers.root('dist'),
      filename: 'bundle.js' //your build file
   }
   

2. 很简单，通过 npm 安装你的依赖项并在你的项目中使用它们，webpack 会处理它们，这意味着它将它们捆绑到你的构建中。

   示例

   npm install lodash

在你的项目中

require("lodash")

1. 当您使用 ng-serve 运行应用程序时，它不会构建物理文件，而是从内存中提供服务，这就是您看不到任何文件的原因。
2. 只要您使用 ng-serve 运行应用程序，它就不会显示物理文件，但如果您运行 ng-build，它会将物理文件构建到 dist 文件夹，您将能够看到它们。

read more about webpack it's awesome