Angular CLI,Webpack,Browsersync等有什么区别?

您必须一步一步去。

什么是webpack?
Webpack是一个模块捆绑器。 我认为该定义不是很有用,因此我尝试描述它可以帮助您实现的目标:

  • 它管理您的第三方应用程序依赖性。 就像,如果您使用npm安装库,则可以使用Webpack使用各种JavaScript模块方法(例如AMD,CommonJS)以及最近的官方ES2015(也称为ES6)模块规范来导入那些文件。 参见此处:ES2015 –快速入门
  • 它允许您执行“代码拆分”,例如将JavaScript模块拆分为不同的文件/捆绑包,以实现更好的缓存或延迟加载。
  • 通过插件,它可以帮助您缩小文件,将它们连接起来,以便准备好将其部署到生产环境中(出于性能原因,您希望缩小文件)
  • 通过插件,它还可以实现其他功能,例如内嵌图像或将SASS编译为CSS等。

总而言之,它就像一个任务运行程序,已经为您准备了大量的插件,可以立即使用,并且可以应付大多数人遇到的用例。

什么是BrowserSync?
BrowserSync是一种工具,可将您的代码文件与一个或多个浏览器同步。 就像启动您正在开发的应用程序并使用browsersync一样,它将保持与开发服务器的WebSocket连接,并且每当您更改文件时,它将在浏览器中进行刷新。 而且,afaik,您还可以连接多个运行方式相同的浏览器。 就像在一个窗口中滚动一样,其他所有窗口也将滚动。 事实证明,这在移动测试中非常有用。

什么是Angular CLI?
Angular CLI只是一个命令行界面,捆绑了上面提到的一些技术。 像它一样,它可以帮助您遵循官方Angular 2 StyleGuide的最佳实践来生成代码。 它在后台使用Webpack来精确地处理我们上面提到的内容(缩小文件,将其打包等)。 区别在于您不必了解Webpack,Webpack的工作方式以及如何配置和设置。 显然,它会在CLI的范围内,由CLI为您完成。

如果不使用CLI,将如何进行部署?
您只需要使用Webpack(或其他模块捆绑器+任务运行器)并自己编写配置即可。 很好,那里有几个很好的入门者:

  • 使用webpack:AngularClass / angular2-webpack-starter
  • 使用SystemJS和Gulp:mgechev / angular2-seed

仅提及其中两个。

对于Angular CLI,请参阅→Angular 5:CLI