angular-cli @ webpack如何工作？

Question

我已经使用了带有systemJS的angular-cli，现在我很熟悉它的构建过程，测试用例＆amp;组件互动。

最近我将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