Vue+Webpack压缩打包及上线流程

一、 使用Webpack+Babel打包Vue项目
步骤:
1、 安装babel相关的包

图片1.png

npm install babel-core babel-loader babel-preset-env –save-dev
2、 在项目根目录下创建一个babel的配置文件.babelrc
图片2.png

3、 在.babelrc中配置写好对应的json代码片段
图片3.png

代码片段
1.png

4、 在webpack.config.js中使用babel-loader
图片4.png

5、 在webpack.config.js的插件配置中写上如下代码即可
图片5.png

6、在当前项目中的根目录下，运行webpack --progress打包即可
图片6.png

二、 使用Express开启Web服务，通过网络访问Vue项目
步骤:
1、将index.html、bundle.js放在对应的文件夹下面
图片7.png

2、在server.js写好对应的代码
图片8.png

3、在终端中使用 node server开启web服务
图片9.png

4、在浏览器中输入127.0.0.1:3000/index.html，即可看到效果
图片10.png

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

推荐阅读更多精彩内容

  • 从0到1搭建webpack2+vue2自定义模板详细教程
    前言 webpack2和vue2已经不是新鲜东西了，满大街的文章在讲解webpack和vue，但是很多内容写的不是...
    技术宅小青年阅读 6,620评论 4赞 43
  • webpack 2 打包实战
    写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,347评论 4赞 31
  • webpack教程
    无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅，特此分享以备自己日后查看，也希望更多的人看到...
    小小字符阅读 8,278评论 7赞 35
  • 心情
    好像遇见你后运气好了些 自己也开心了许多 那些难过的伤心的事也都不会去想，哪怕想起来也只是很淡然的笑了笑，然后对自...
    Shellly阅读 264评论 1赞 0
  • 温柔的坚持
    温柔的坚圣经的使徒行传中有句话是这样写的：我们进入神的国，必须经历许多艰难。细细想一下也的确如此，比如麦子必须磨碎...
    高桥先生阅读 325评论 0赞 1