webpack如何使用angular2

Question

我尝试在webpack中使用angular2，我遵循角度向导的步骤，当运行我的项目时，没有错误，输出是：

 70% 3/3 build modules http://localhost:8080/
webpack result is served from http://localhost:8080/
content is served from D:\angular-webpack
404s will fallback to /index.html
chunk    {0} app.js, app.css (app) 3.56 kB {2} [rendered]
chunk    {1} polyfills.js (polyfills) 467 kB [rendered]
chunk    {2} vendor.js (vendor) 2.34 MB {1} [rendered]
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 321 bytes [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 1.96 kB [rendered]
webpack: bundle is now VALID.

但我不知道在这之后，如何使用它在生产中部署我的项目？此外，dist文件夹始终为空。

Answer 1

您正在运行webpack开发服务器命令- npm start，以启动您的应用程序转到http://localhost:8080/。要在生产中部署项目，您应该运行npm build，它将创建dist文件夹，并生成应用程序的产品包。

参见“脚本”：在package.json中

Answer 2

若要在生产中部署项目，请在命令行中运行ng build --prod。通过这样做，文件将添加到dist文件夹中。

希望这能有所帮助。

Answer 3

您的问题非常广泛，可以给您一个明确的答案，您的问题，无论如何，这可能会帮助您和其他用户上的堆栈溢出。

我强烈建议使用https://github.com/AngularClass/angular2-webpack-starter/查看这个样板存储库( webpack2 )，并使用最新版本的angular2进行更新。

它可能比你想要的要复杂得多，但是你可以从这个回购中获得很多方向，比如：

• 如何运行一个良好的开发流程( hmr和webpack手表)
• 如何将代码编译为生产(缩小并在dist文件夹中可用)
• 结构化和可工作的e2e测试和单元测试

这不是一个确切的答案，但我认为这将有助于指导许多与webpack相关的设置问题的用户。

这是回购：https://github.com/AngularClass/angular2-webpack-starter/

我从一开始就一直在跟踪它，并且是我的GOTO资源，用于指导我开始的任何新项目的设置。

希望这能有所帮助！