从零搭建vue-cli
原创不容易,如需转载请联络作者并说明出处
vue-cli的出现为vue工程化前端开辟工作流供应了开箱即用的构建设置,减轻了烦人的webpack设置流程。但高度封装的cli带来轻易的同时,很多人却很少去关注轮子的内部构造,以至于当运用vue-cli须要手动设置一些东西(如编译less,scss,完成代码紧缩,挪动端适配等设置)的时刻每每无从下手。空话不多说,下面我们来看看怎样基于webpack模拟vue-cli完成vue项目工程化。
假如本demo对你进修和明白vue-cli有协助,请给我个star~~感谢
本demo github地点:
https://github.com/hedonghui/…
目次
1.webpack初始化及webpack周边相干设置
2.静态资本加载及css与处置惩罚器
3.webpack-dev-server及开辟形式相干设置
4.设置vue的jsx写法及postcss相干
5.css零丁星散打包
6.代码星散及临盆环境浏览器缓存相干
经由过程webpack搭建vue工程
起首我们来看看本文章demo完成后的团体packgage.json的包依靠构造:
下面我们来对这内里的统统包作用举行大致剖析:
(本demo将差别环境webpack相干设置写在同一个config.js,packgage.js里基础不辨别dependencies devDependencies,有异与 vue-cli官方将差别环境设置离开差别文件的体式格局,,读者能够依据webpack官
方文档引荐的webpack-merge东西并参考vue-cli源码举行相干设置。关于进修无伤大雅)
vue相干初始化
起首新建一个文件夹,翻开命令行窗口举行 npm init 初始化
先来看看装置的这几个包:
1.webpack———此处省略200字
2.vue———–Vue包
3.css-loader————–处置惩罚打包css文件
4.vue-loader—————处置惩罚打包.vue文件(依靠于css-loader, vue-template-compiler)
5.vue-template-compiler —————-处置惩罚vue模板<template>
webpack.config.js相干设置
现在我们装了vue相干的几个包,并在webpack.config.js内里设置了打包进口和出口相干的内容,接着我们去设置以下package.json下script脚本以启动我们的webpack打包
仔细的朋侪应当已发现了我们设置了build和dev两个选项来辨别临盆环境和开辟环境。实在在vue-cli或许其他的webpack相干搭建的工程中,纯真的将html,css,js代码打包到一同远远不能满足我们的需求,因而,webpack为我们供应了雄厚的插件和相干设置来完成代码支解、类库代码与营业代码离开打包、模块热替代、babel转码、webpack-dev-server、css预处置惩罚等相干功用。
**
下面我们一一来看这这个东西的设置与完成
**
cross-env
因为我们的webpack.config都写在同一个设置文件内里,在完成临盆环境和开辟环境中针对差别操纵系统开辟平台的差别,我们引入cross-env来完成赞同治理,经由过程在webpack.config.js中推断是不是为开辟形式举行差别的设置
webpack-dev-server 与热更新 (一个微效劳)
babel以及postcss相干设置
babel是一个能将jsx以及es6等转码成javascript代码的转码东西,vue2后支撑jsx写法,我们在webpack中也引入babel babel-loader等相干,使其能将vue中的jsx转码。babel相干设置在babelrc文件中,以下
在这个demo的babel设置中,我们只设置了两个基础项,能够对比下vue-cli中更多的相干设置
{
//这里是指清楚明了转码划定规矩env项是借助插件babel-preset-env,下面这个设置说的是babel对es6,es7,es8举行转
//码,而且设置amd,commonjs如许的模块化文件,不举行转码
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
// 下面这个选项是援用插件来处置惩罚代码的转换,transform-runtime用来处置惩罚全局函数和优化babel编译
//transform-vue-jsx 望文生义是 transform vue-jsx to javascript
//至于下面test 是提早设置的环境变量,假如没有设置BABEL_ENV则运用NODE_ENV,假如都没有设置默许
//就是development, instanbul是一个用来测试转码后代码的东西
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
看晕了没?单单一个babelrc设置文件就有那么多设置
不虚!本demo只是设置了基础重要项能完成大部份功用(实在关键在于让你大致明白vue-cli这个轮子是怎样构建起来的)
我们继承往下看
postcss.config.js
- postcss.config.js重要用来设置css相干的内容
- 在vue-cli内里默许有三个插件postcss-import postcss-url autoprefixer(我这里只弄了一个)
- 在这个文件里我们还能够设置挪动端适配相干的东西,经由过程引入一些插件能够自动化为我们处置惩罚屏幕适配
- 题目,具体内容我就不在这里睁开
- 相干文章能够看看这篇:https://www.w3cplus.com/mobil…
代码星散以及做浏览器缓存
webpack是一个统统以js为中间的打包东西,但是在临盆形式中将统统东西都打包到bundlejs内里不利于做浏览器
缓存,类库文件都是大牛们造给宽大码农的轮子,其稳定性高、牢靠,所以在临盆环境中能够举行浏览器缓存,没必要跟随着营业代码常常更新,削减收集要求材料的斲丧,webpack官方为我们供应一个叫extract-text-webpack-plugin插件来星散css款式,同时vue-cli内里还对类库代码(如vue.js),webpack相干代码与我们的营业代码举行星散,这里起作用的是这两个东东:new webpack.optimize.CommonsChunkPlugin() new webpack.optimize.CommonsChunkPlugin()
我们来看一看本demo中production相干的设置:
最厥后总结一下
实在vue-cli整体上来说是为我们设置了
- 开辟环境下的 webpack-dev-server及热更新babel、懒加载、款式打包等
- 临盆环境下的星散打包,零丁打包,依据chunkhash处置惩罚浏览器缓存,代码紧缩等
- 当然在vue-cli中另有关于eslint相干的代码范例设置在本文中没有讲到(实际上是不太会)
末了本demo另有关于懒加载以及代码紧缩部份须要去完美,实在简朴的代码紧缩也就几行代码
下面附上webpack官方文档的小示例:
至于…懒加载..我再揣摩揣摩(逃
本demo源码在这里[ [1]: https://github.com/hedonghui/…][1]