Vue-cli
项目构建
开发vue
项目的时候,大部分人都是使用 vue-cli
脚手架生成的项目架构,然后 npm install
安装依赖,npm run dev
启动项目然后就开始写业务代码了。
但是对项目里的 webpack
封装和配置了解的不清楚,容易导致出问题不知如何解决,或者不会通过 webpack
去扩展新功能。
Vue-cli
项目配置
使用vue-cli
生成的项目,是因为vue-cli
配置了一些基本的功能,具体如下:
- ES6代码转换成ES5代码
- scss/sass/less/stylus转css
- vue文件转换成js文件
- 使用 jpg、png,font等资源文件
- 自动添加css各浏览器产商的前缀
- 代码热更新(热更新就是应用里面某些模块和页面是用h5 js 来写的,就和网页一样,代码都在服务器上,更新只需要更改服务器上的代码就可以了)
- 资源预加载
- 每次构建代码清除之前生成的代码
- 定义环境变量
- 区分开发环境打包跟生产环境打包
- …
搭建webpack
基本环境
简单的说,webpack
是一个模块打包机,可以分析你的项目依赖的模块以及一些浏览器不能直接运行的语言jsx、vue
等转换成 js、css
文件等,供浏览器使用。
- 初始化项目
在命令行中执行 npm init
然后一路回车就行了,主要是生成一些项目基本信息。最后会生成一个package.json
文件
npm init
- 安装
webpack
- 测试
webpack
是否安装成功
新建一个src
文件夹,然后再建一个main.js
文件
// src/main.js
console.log('hello webpack')
然后在package.json
下面加一个脚本命令
然后运行该命令
npm run serve
如果在 dist
目录下生成了一个main.js
文件,则表示webpack
工作正常
具体webpack配置可以参见webpack具体配置说明