一、webpack简介
webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境
webpack提供了友好的模块化支持，以及代码压缩混淆，处理js兼容问题，性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。
webpack其中一个核心就是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系，而且不仅仅是JavaScript文件，我们的css、图片、json文件等等在webpack中都可以被当作模块来使用。
打包：就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)，并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将es6语法转成es5语法，将TypeScript转成JavaScript等等操作。但打包的操作似乎grunt/gulp也可以帮我们完成，它们有什么不同呢？
和grunt/gulp的对比
grunt/gulp的核心是Task
我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css）
之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。
所以grunt/gulp也被称为前端自动化任务管理工具。
什么时候用grunt/gulp呢？
如果你的工程模块依赖非常简单，甚至没有用到模块化概念。
只需要进行简单的合并，压缩，转化，使用grunt/gulp即可。
但如果整个项目使用了模块化管理，而且相互依赖非常强，就需要使用更强大的webpack了。
总结：grunt/gulp和webpack有什么不同呢？
grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。
webpack更加强调模块化开发管理，而文件压缩合并，预处理等功能，是他附带的功能。
webpack依赖于Node环境，使用webpack首选需要安装node，node环境为了可以正常执行很多代码，必须包含各种依赖的包，一般安装node的时候会自动安装npm（node packages manage）工具（该工具只是为了管理Node环境下的各种包）
二、webpack安装
安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm
查看自己的node版本：node -v(node版本必须大于8.9)
1、全局安装webpack（先指定版本为3.6.0，因为vue cli2依赖该版本，为了可以对比下脚手架vue cli2自动生成的配置和自己配置的区别因此先指定版本为3.6.0）
npm install [email protected]
2、局部安装webpack，--save-dev 开发时依赖，只有在开发阶段会使用，真正发布运行起来就不再使用（项目打包后不需要继续使用）
a、项目中需要安装自己局部的webpack
这里我们局部安装webpack3.6.0，因为vue cli3已经升级到webpack4，但它将配置文件隐藏了起来，所以查看起来不是很方便。
npm install [email protected]
b、通过node_modules/.bin/webpack启动webpack打包
第二步命令确实很麻烦，如果想简单使用，可以在package.json中定义启动
在package.json的scripts中定义自己的执行脚本。
package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。
首先，会寻找本地node_modules/.bin路径中对应的命令。
如果没有找到，会去全局的环境变量中寻找。如何执行我们的bulid指令呢：npm run build
3、为什么全局安装后，还需要局部安装？
因为一个项目往往依赖特定的webpack版本，全局的版本可能跟这个项目的webpack版本不一致，导出打包出现问题，通常一个项目，都有自己局部的webpack，那么如何查看一个项目使用的是全局webpack还是局部webpack呢
在终端直接执行webpack命令，使用的全局安装webpack
当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack
三、webpack的基本使用过程
1、准备工作：
创建如下文件和文件夹：
dist文件夹：用于存放打包之后的文件
src文件夹：用于存放我们写的源代码
main.js：项目的入口文件
mathUtils.js：定义了一些数学工具函数，可以在其他地方引用并使用
package.json：通过npm init生成的，npm包管理的文件
index.html：浏览器打开展示的首页html，相关代码如下：
mathUtils.js中的代码如下：
main.js中的代码如下：
2、js文件的打包
现在的js文件中使用了模块化的方式进行开发，它们还不能直接使用。
因为如果直接在index.html引入这两个js文件，浏览器并不识别其中的模块化代码。
另外，在真实项目中当有许多这样的js文件时，我们一个个引用非常麻烦，并且后期非常不方便对它们进行管理。
应该如何做呢？使用webpack工具，对多个js文件进行打包。
webpack就是一个模块化打包工具，所以支持我们代码中写模块化，可以对模块化代码进行处理。（如何处理呢）
另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得非常方便了。
如何打包呢？使用webpack的指令即可，基于webpack版本而言分为两种方式
低版本指令：
webpack./src/main.js ./dist/bundle.js
新版本指令：
webpack--entry ./src/main.js -o ./dist --mode=development
第一种：使用webpack --entry ./src/index.js -o ./build --mode=development打包到./build/main.js
第二种：使用npx webpack --mode=development自动打包，打包到./dist/main.js 默认打包src下的index到dist文件夹下的main.js
注意：这里如果没写--mode=development会报错。报错如下：
The 'mode' option has not been set,webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or....
3、入口和出口
如果每次使用webpack的命令需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将两个参数写到配置中，在运行时，直接读取呢？
当然可以，需要创建一个webpack.config.js文件，配置完成后直接执行webpack即可打包