从零搭建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]