本文来源于「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": "^4.42.1", "webpack-cli": "^3.3.11" }}
让我们现在运行 yarn run build 来看下,成功建立了 dist 文件夹,虽然在解析 App.vue 时报错:
我们此时暂将 src/main.js 中和引用 App.vue 相关的代码注释掉,只留下 import Vue from 'vue' 这一句。别担心,后续再通过使用vue-loader进行解决这个错误。
import Vue from 'vue'/*import App from './App.vue'Vue.config.productionTip = falsenew Vue({
render: h => h(App),}).$mount('#app')*/
然后我们为生成的 js 文件添加 hash 值来保证每次修改 js 文件不会被浏览器缓存影响调试。得益于webpack 的智能这一步非常简单,直接更改 output 的 filename,由output.js 变为[name].[hash:8].js 即可完成。运行 yarn run build 之后发现 dist 文件夹中已经生成了main.****.js文件,其中包含了main.js还有它依赖的全部js文件。
2. 打包时引用自定义模版
接下来我们使用public文件夹中的html模板来构造dist的html文件:这时候我们需要用到webpack的html-webpack-plugin插件。首先安装插件:yarn add html-webpack-plugin --dev,然后在webpack.config.js中添加相应的plugin:
const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {
mode: 'development', entry: path.resolve(__dirname, 'src/main.js'), output: {
filename: 'output.js', path: path.resolve(__dirname, './dist') }, plugins:[ new HtmlWebpackPlugin() ]}
执行 yarn run build 之后我们发现 dist 文件夹中出现了index.html, 在index.html 内部加载了main.****.js 文件。这和我们所期望的一致!当然我们可以使用 public 文件夹中的 index.html 模板来构造这个 dist 中的html 文件:
new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html') })
但是再次执行yarn run build之后,输出会报错如下:
我们通过查看 public/index.html 文件发现,文件中引用了:
href="favicon.ico">和
这些变量我们目前还没有进行赋值。我们通过查看html-webpack-plugin 的文档发现可以设置 title 和 template