太强了，从 0 到 1 搭建 vue-cli

本文来源于「Vue 虚拟实验 by 张家博」，作者自己一步一步实现了类似于 vue-cli 做的工作，帮助你理解 vue-cli 中所使用的工具，比如 webpack、ESLint、babel 等。

类似 create-create-app，vue cli 也提供了非常便利的创建项目的快捷方式，利用 vue create project 这样的命令，再通过互动式的几条命令，就可以实现一个包装了 webpack, babel, eslint 等应用最广泛的工程化工具，让我们可以做到“开箱即用”。

虽然这个构建过程非常简便快速，但是我们还是需要对这些现代工具如何与 vue 进行融合进行掌握，这样后期的新增扩展，升级部署，解决问题甚至性能调优才得以快速实现。所以本篇文章致力于自行构建一个和vue-cli 生成的项目体验几乎一致的步骤，并细化每一个步骤的实现方式。让我们看一下如果实现vue-cli，需要对以下的几个工具进行理解和使用：

如果对以上四种工具还未完全掌握，可参考各自的官方文档，因为这些工具的迭代速度很快，除官方文档之外的一些介绍教程更新不会很及时，会有很多引用包和写法废弃，建议还是以官方文档为主。

1、功能介绍

现在让我们来归纳下，vue-cli 到底帮我们做了哪些功能：

• 将代码中所有引用的 js 文件打包并添加进 html 中

• 打包时引用自定义的 html 模版

• 每次构建之前清理 dist 文件夹

• 利用 vue-loader 处理 .vue 文件

• 将除j s, css 类型之外的所有被引用到的文件打包处理(例如图片资源)

• 将代码中引用的 css 文件打包并添加进 html 文件中

• 构建一个静态文件服务器以在浏览器中展现网页

• 支持最新的 Javascript 语法和 API

• 集成 ESLint 以进行静态代码检验

除了以上的几点功能，vue-cli 还实现了例如单元测试、css自动前缀、TS 集成等等功能，甚至还有一套图形化界面管理所有的项目，当然作为从 0 到 1 的文章，本篇只能暂时关注以上几个功能的具体实现了。

2、准备工作

让我们先来通过 vue new vue-template 命令来建立一个项目（注意我们本篇文章主要围绕构建 vue-cli 项目而不是这个 vue-template 项目），看下 vue create 命令之后生成的文件夹结构：

其中，public 和 src 由于不涉及到构建 vue-cli 的功能，同时又可以起到校验构建结果的作用，所以复用 public 和 src 中的文件来作为构建的基础，接下来我们就开始构建之旅了：

先做准备工作：新建目录vue-cli，利用我们心爱的 yarn 工具执行 yarn init，生成 package.json 文件；随后执行 yarn，创建 node_modules 文件夹和 yarn.lock 文件。

安装webpack:

yarn add webpack webpack-cli --dev

安装 vue: 

yarn add vue

然后将通过 vue new 执行得到的 src 文件夹和 public 文件夹复制到新项目中。以上就完成了准备工作。

接下来，我们分步来实现前面提到的几点功能。

1. js 文件打包并添加进 html 中

首先我们要使用 webpack 提供的功能将代码中的 js 文件及其依赖打包并添加 hash 值，然后将文件路径写进 html 中。我们在项目的根目录建立 webpack.config.js，设置环境(mode)为 development，设置入口(entry)为 src 中的 main.js，设置输出(output)为 dist 文件夹中的 output.js 文件：

const path = require('path')
module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src/main.js'),
  output: {
    filename: 'output.js',
    path: path.resolve(__dirname, './dist')
  }
}

编辑 package.json 文件，添加 scripts 属性："scripts": { "build": "webpack" }，由于 webpack 可自行找到位于根目录下的webpack.config.js，故这里不需要添加参数。如果你需要把 webpack.config.js 放到其他文件夹中（例如 build ）则需要添加: webpack --config build/webpack.config.js。目前的 package.json 文件如下：

{
  "name": "vue-cli",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack"