使用 Vue 脚手架，为什么要学 webpack?(一)
先问大家一个很简单的问题：
vue init webpack prjectName 与 vue create projectName 有什么区别呢？
它们是 Vue-cli 2 和 Vue-cli3 创建项目的两个命令，之所以两个命令不同，根本原因是 Vue-cli2 是基于webpack 3，而 vue-cli3 是基于 webpack 4 的。
所以我们先介绍 webpack 是如何管理项目的，如何把项目中 js、css、html等是如何压缩转换文件？然后学习 vue-cli 2、vue-cli 3 分别如何创建项目，以及项目结构介绍。
一、全面了解 webpack
1.1、什么是Webpack？
webpack 就是前端模块化打包工具。讲人话就是，webpack 的理念就是一切皆模块化，把一堆堆的 js、css等文件放在一个总的入口文件引入，剩下 webpack 会把引入的文件根据对应的关系合并成一个 bundle.js 。打包后的 index.html 引入 bundle就可以了。除了 css、js还有图片、字体、html模板都可以模块化打包。
如下图：
1.2、为什么要将所有资源放在一个文件内？
我们都知道，网页渲染的时候，加载的东西越少，响应的也就更快，网页的加载速度就能快好多，有时为了优化性能，我们会把资源都合并到一个文件内，导致这个文件会很大，往往会出现两个问题：
- 当项目庞大的时候，不同页面不能做到按需加载，而且将所有的资源一并加载，耗费时间过长，性能反而降低
- 导致依赖库之间关系混乱，当项目越来越大时，会变得难以维护。
但是对于 webpack，可以很好地解决上述两个问题，webpack 有同步和异步两种加载方式，正确配置后，可以进行按需加载。所以 webpack 是一个十分聪明很有优秀的打包工具。
1.3、为什么使用webpack ?
- 对模块化规范 CommonJS 、AMD、CMD支持性友好。
- 形成项目依赖树，每个依赖都可拆分成一个模块，进行按需加载。
- 有强大的插件系统，可以实现代码压缩、分包、模块热替换等，自定义模块等自动化工作。
- 开发配置快速高效。是前端目前最主流的模块化打包工具。
二、开始你的第一个 webpack 项目
webpack 是一个基于 node 的项目，所以使用之前我们需要安装 node.js。
node.js 官网：https://nodejs.org/zh-cn/
下载之后进行安装，安装完成之后：
使用 node -v检查 node 的版本：如：v12.18.2
使用 npm -v 检查 npm的版本
2.1、安装webpack
安装可分：为全局安装和当前项目安装。
全局安装：npm install webpack -g
在c盘下会生成 node_modules 文件夹中会包含 webpack，此时此刻我们可以使用 webpack命令了；
项目内安装：npm install webpack --save 或者npm install webpack --save-dev
npm install webpack --save 与 npm install webpack --save-dev 区别在于是否将依赖存入 dependencies 以及 devdependencies。
2.2、生成 package.json
创建一个webpack项目文件夹，进入项目文件内根目录下，执行命令：npm init
如图：根据问题提示，输入对应信息后，会在根目录下生成 package.json 文件。
2.3、新建项目内容
dist -- distribution（发布）
创建 dist 文件夹，用于存储打包之后的文件。
创建 src 文件夹，文件夹内新建 index.js 作为入口；创建index.html文件，并创建main.js文件并引入html。
2.3、配置 webpack
webpack.config.js 代码如下：
module.exports={
entry:'./src/main.js',
output:{
path:'./dist',
filename:'bundle.js'
}
}entry(入口)：配置入口文件
output(输出)：设置打包后文件存放路径(path) 和文件名(filename)。
运行命令：webpack --config webpack.config.js，进行打包。
命令报错：
- Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- - configuration.output.path: The provided value "./dist" is not an absolute path!
- -> The output directory as **absolute path** (required).
提示路径需要设置绝对路径。
2.4、打包文件
此时需要引入 node 的 path 模块。并修改 path 配置，把路径设置为当前项目根目录下。
修改 package.config.js 文件代码如下：
const path = require('path')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
}
}重新运行命令：webpack --config webpack.config.js，进行打包。此时就会在dist文件夹内出现了一个被打包后的 bundle.js。
三、webpack 用来做什么？
以上内容讲述的打包，只是打包了js内容，具体的index.html并没有被打包到dist文件内。那是什么原因呢？
webpack 用来处理我们写的 js 代码，webpack会自动处理 js 之间相关依赖。但是开发中不仅仅只有基本的 js 代码处理，也需要加载 css、图片、也包括一些高级的ES6转ES5、TypeScript 转 ES5、将 scss、less 转 css、将 jsx.vue 文件转js文件等。
webpack 本不支持上述这些转化，此时需要对 webpack 进行扩充。下篇文章介绍webpack的 loaders 和 plugin。
点赞关注不迷路，感谢支持！