angular2 打包后如何静态部署

如何打包

点我查看


tomcat 部署

tomcat官网传送门,首先需要下载一个tomcat,然后启动。

cd ng2project ~/tomcat/webapps
将ng2项目里生成的dist 文件夹 拷贝到 tomcat 目录下的webapps下


查看ng2项目运行情况
http://localhost/8080/dist

从错误可以看出是找不到对应的js导致页面无法顺利加载
cd tomcat/webapps/dist
vi index.html

修改前
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

调整后
<script type="text/javascript" src="dist/inline.bundle.js"></script>
<script type="text/javascript" src="dist/polyfills.bundle.js"></script>
<script type="text/javascript" src="dist/styles.bundle.js"></script>
<script type="text/javascript" src="dist/vendor.bundle.js"></script>
<script type="text/javascript" src="dist/main.bundle.js"></script>


这样调整比较麻烦,每次webpack编译后还要修改index.html很不方便。感谢我们使用了webpack。

打开webpack.config.js
"output": { "publicPath": "dist/", --添加这一句后,webpack后就会自动帮你加上dist/ //"publicPath": "http://192.168.1.82:8080/dist/", --还可以直接指向某个域名或者服务器下的js "path": path.join(process.cwd(), "dist"), "filename": "[name].bundle.js", "chunkFilename": "[id].chunk.js" },

Thanks

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 16,857评论 31 98
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,319评论 4 31
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,710评论 7 110
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,231评论 0 21
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,496评论 2 71