Vue全家桶系列之Vue-cli(三)

1.前言

上一篇文章对整个项目的目录结构进行了讲解，那么这篇文章我们来说下webpack配置相关的文件，webpack是当前最流行的构建工具，所以有必要对它进行了解！

2.webpack配置

我们先 npm run dev启动项目,再打开浏览器,F12来看下请求的文件，这里面请求了一个app.js文件，但是查看下index.html模版里面并没有这个文件！其实都是webpack的功能，它会把app.js文件自动的插入到index.html模版里面

接下来我们主要来分析下webpack配置，它的配置主要在build,还有config文件夹里面，这么多js文件，那么就要从入口文件看，找到package.json文件,里面有个script,里面是我们定义的一些脚本！并且可以借助npm script来执行命令脚本！

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

先说下webpack-dev-server，webpack-dev-server是一个本地开发工具，启动一个本地的服务器，可以用来处理打包资源和静态文件的请求，并且会将打包结果放在内存中，在每次webpack-dev-server接受到请求时都只是将内存的中的打包返回给浏览器（你可以通过删除工程中的dist目录来验证，你会发现即使dist目录不存在，刷新页面功能仍然可以正常运行 ），还有它的live-reloading功能（自动刷新）可以监听文件的变化，自动刷新页面来提升开发效率的，所以webpack-dev-server一般在本地开发才会用到！

再来看"dev"和"start",那么 npm run dev 和npm run start 都是用webpack-dev-server去执行build下面的webpack.dev.conf.js配置，这个是开发环境的配置,"build"就是生产环境的配置了，所以npm run build就是node去执行 build文件下的build.js文件了，再分别来看下build和config下的文件

先来看下build文件夹的文件，看下面：

1. build.js是构建开发的环境的脚本文件，npm run build所执行的脚本。
2. check-versions.js是检查npm和node的版本的脚本文件。
3. utils.js是用于一些工具方法（生成路径的地址），主要用于生成cssLoader和styleLoader配置的脚本。
4. vue-loader.conf.js是vue-loader的一些基本配置，里面用到utils.js的一些方法。
5. weback.base.conf.js是dev和prod环境下的基本配置。
6. weboack.dev.conf.js是dev环境的配置。
7. weboack.prod.conf.js是prod环境的配置。

再开来看下config文件夹的文件，看下面：

1. dev.env.js是dev环境变量配置。
2. index.js是dev和prod环境的一些基本属性配置（我们可以根据自己的需要来更改这些配置）。
3. prod.env.js 是prod环境变量配置。

我们下面来一个一个来详细讲解这些文件,先来看check-versions.js,主要是检查npm和node的版本的！

再来看下config下的index.js,主要是dev和prod环境的一些基本属性配置（我们可以根据自己的需要来更改这些配置），webpack.dev.conf.js和webpack.prod.conf.js都会用到这个文件的一些基本属性配置！

prod.env.js是prod环境变量配置，就是一个对象，webpack.prod.conf.js也会用到这个文件的变量！

dev.env.js是dev环境变量配置，其实也是一个对象，只不过prod环境是"production"，dev环境是"development"，webpack.dev.conf.js会用到这个文件的变量！

webpack.base.conf.js是prod和dev的公用配置！最终生成完整的配置都要加上它！

webpack.base.conf.js用到utils.js和vue-loader.conf.js，并且vue-loader.conf.js也用到utils.js的方法，先来看下utils.js，它有生成路径的方法和用于生成cssLoader和styleLoader配置的方法！

vue-loader.conf.js是vue-loader的一些基本配置！

webpack.dev.conf.js是dev环境的配置！

webpack.prod.conf是prod环境的配置！

最后一个是build.js文件，这个是建构开发环境的文件！

终于整理完了！我们下篇来说下vue全家桶的vue-router!如果觉得写的可以，点个关注！谢谢!