如何使用 webpack 和 angular2 为生产部署代码
Posted
技术标签:
【中文标题】如何使用 webpack 和 angular2 为生产部署代码【英文标题】：How to deploy code for production using webpack and angular2 【发布时间】：2017-01-16 07:22:07 【问题描述】：我有一个带有 webpack 和 grunt 的 angular 2 代码。在开发模式下，我使用 webpack-dev-server 加载并将其作为 grunt 任务运行。
在为生产部署构建代码时，我使用 Grunt 进行所有缩小等操作并创建一个 dist/ 文件夹。
但是如何运行这个 dist/ 文件夹？使用什么服务器？
我读到 webpack-dev-server 不应该用于生产部署。所以我开始寻找可以作为 grunt 命令启动服务器的其他选项。
我发现不应该使用 grunt:server。 http://***.com/questions/22577336/can-grunt-server-use-for-production-application-deployment
然后我开始考虑快递服务器，但我真的不确定。
我想要的只是我创建的 dist/ 文件夹应该使用服务器呈现。我正在使用 webpack
我的问题是：
-
我们不应该将服务器作为 Grunt 任务启动吗？我们应该改用 npm 脚本吗？
我应该使用哪个服务器来部署使用 webpack 的生产级代码？
【问题讨论】：
我的服务器机器上有 node.js。我应该编写脚本在节点中创建服务器吗？ 【参考方案1】：我的 dist 文件夹位于 wwwroot 下。它是从 index.html 文件中引用的，该文件也位于 wwwroot 下。原始文件位于我的应用程序的 ClientApp 文件夹下。
WebPack 最小化和部署我的 ClientApp 文件夹中的文件，并将它们放在 dist 下的 main.js 文件中。
WebPack 也对所有供应商文件执行此操作，这些文件实际上存储在项目根路径的 node_modules 文件夹中。它将这些放在 vendor.js 中。
css 文件也是如此。请参阅下面的 index.html 文件。看到对 /dist/ 文件夹的引用了吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home Page - MyApp</title>
<base href="/" />
<link rel="stylesheet" href="/dist/vendor.css" />
<link rel="stylesheet" href="/dist/styles.css" />
</head>
<body >
<my-app />
<script src="/dist/vendor.js"></script>
<script src="/dist/main.js"></script>
</body>
</html>
【讨论】：
以上是关于如何使用 webpack 和 angular2 为生产部署代码的主要内容，如果未能解决你的问题，请参考以下文章
如何将 TypeScript WebPack ts-loader 与 Angular2 @View 样式集成？
带有 Angular2 和 VS 2015 的 Webpack
angular2-webpack-starter 如何将 NodeJS 服务器添加到项目中