webpack把vue文件编译成html,深入使用webpack构建vue.js单页应用

原标题:深入使用webpack构建vue.js单页应用

1.安装依赖包

项目中使用了vue.js,webpack,gulp,还有饿了么开源的elementUI,因为使用了es2015,所以还需要引入babel将es6的js代码转换成es5。

必须用到的依赖如下:

b10aa424950abbe9c3701fd317c45d7b.png

此外gulp-cli、webpack、babel-cli最好使用全局安装,npm install -g webpack,就可以在命令行下方便的使用命令。此外npm的安装和下载速度也是一个饱受诟病的问题,为了提高安装依赖包速度,可以安装cnpm或者yarn,目前我自己使用的是cnpm。

2.webpack配置文件

安装完依赖包之后,就可以直接使用webpack命令进行打包,通过webpacke.config.js配置文件,指挥webpack需要按照什么规则进行构建。

0d1cdaf682ec481126286db703438938.png

说明:

entry:入口点,webpack会从入口点设置的js文件开始对项目进行构建,过程中,所有入口点通过import或者require依

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值