首先，webpack 是什么？
webpack 是一个自动化开发工具，它可以帮助我们来做很多重复性的一些工作。
理论上来说，即使我们不使用 webpack，也不会有什么影响，只是很多重复，繁琐的工作，需要我们一个一个的去做，非常的费劲。
那么 webpack 能帮助我们做什么呢？
1，压缩代码。比如原来 170KB 的文件，压缩完变成 90KB 大小。
2，打包。比如说我这里有一堆的文件，我需要把它都打到一个文件里面去，这样的话，我只需要引入一个文件，就可以把所有东西都拿过来。这样做，就是为了提高一个加载的性能。
3，多种文件的编译。比如说 less 文件不能直接用，如果我们直接就把 less 文件引入到 html 里面去，它肯定不认识的，那我们这里就可以把 less 文件编译成 css 文件，然后在引过去。再比如 ES6 里面的 import，浏览器是不支持的，那么我们可以把它给编译了，然后再用。
4，搭建脚手架。可以帮助我们来搭建一个项目最基本的框架出来，目录结构都给你分好了，你只需要开始写组件，敲代码就可以了。
5，生成生产环境的代码版本。可以帮助我们把代码压缩，删除调试信息等等。
那么首先，我们先来安装 webpack：webpack 中文网的安装教程
然后，我们还是先来做一个项目的初始化 npm init -y
并且创建一个 src 的目录，里面再建个 index.js
然后我们再来下载一个大家比较熟系的库 jquery
然后我们就开始敲代码了：
我们引入 jquery，然后给 body 设置一个灰色的背景色。
然后我们创建 index.html，再引入 index.js 运行
我们会发现，浏览器报错了，位置是 index.js 的第一行。其实就是现在的浏览器并不支持 import。
那么现在，我们就开始用 webpack 来做一个编译了。
首先，webpack 需要一个配置，因为它的功能非常的多，你得告诉它具体要干什么，找哪个文件，做什么事，是编译，还是打包，每个文件怎么处理等等。
所以我们需要创建一个 webpack.config.js，它是 webpack 的核心文件。
当然我们也可以对这个文件进行修改，进行个性化配置。
如果我们使用默认的配置文件名称：webpack.config.js，
当我们在控制台输入指令：webpack。那么执行命令后，它就会自动找到这个默认的配置文件，并使用执行。
那如果我们不使用默认的配置名呢，比如我这个文件叫做 damu.js？
那么我们就需要输入指令：webpack --config damu.js
意思就是说，我指定了 webpack 使用 damu.js 文件来作为配置文件，并使用执行。
那么继续，在它里面，其实就是对外输出一个 json 文件。
那么这个 json 里面，就是 webpack 具体的一些配置。
首先，它里面会有三个东西：
1，mode。也就是模式的意思，它决定了 webpack 如何来工作的。如果我们不设置，它就会报一个 warning，并且默认为 'production' 模式。
mode 它有3种模式：'none'，'development'，'production'。
那么 mode 它具体有什么用呢？它实际上是可以决定 webpack 的优化级别。
那么 'none' 就是不优化。原来什么样，现在就什么样，我什么也不干。
而 'development' 就是开发依赖，那么在这种情况下，它就会帮助我们来保留并输出一些调试信息，同时也不会对文件进行压缩，包括会保留各种各样的东西，以便于你来调试。并且会设置一个环境变量的值 process.env.NODE_ENV = 'development'。
最后的 'production'，就是生产环境。所以它就会做一个最高级别的优化，启用压缩，忽略并屏蔽错误等等。并且也会设置 process.env.NODE_ENV = 'production'。
2，entry。也就是入口的意思，你要编译总得有个起点吧？如果你这有100多个 js 文件，你得告诉我，从哪个文件开始编起。
3，output。也就是打包后的文件，输出到什么地方。（一般大家都会设置 output 的值为 bundle.js，它翻译过来就是打包的意思，大家都习惯叫这个，就比如我们写 for 循环，变量都取名叫 i 一样）
那么配置好了之后，接下来，我们就试试
可以看到，直接给报错了，意思就是说 output 不能直接是一个字符串，它必须得是一个对象。
其实 output 它里面有两个东西：
1，path。就是你编译之后，要输出到哪个目录去。
2，filename。就是你编译之后的这个文件名叫什么。
然后我们重新执行
这时候，你会发现，又报错了，它告诉你，你的 path 不对，它必须得是一个绝对路径，不能用相对路径。
webpack 在这里之所以有这个要求，主要是出于严谨的考虑，因为相对路径容易出问题，而绝对路径是不会有问题的。
然后 path 我们改成 'D:/webpack_csdn/dest'。这样写固然没有问题，但是有一个毛病。
第一，写法很麻烦。
第二，这样写完之后，我就不能换地方了。如果说以后我换电脑了，或者打包放到生产环境上面，这个路径肯定是不对的。
所以我们这里就需要一个 node 里面内置的模块 path，从它的名字就可以看出来，它是专门用来处理各种路径的。
我们这里主要用的就是 path.resolve 方法：
path.resolve 就是用来解析的意思，那么怎么理解呢？
比方说我们给它2个地址，或者很多的地址，它会帮我们把这些地址给串连起来，整合成一个路径。
我们第一个参数 'a/b'：a 目录下 b 目录
第二个参数 '../c'：往上退一级后，进入 c 目录
第三个参数 './d/e'：再接着找当前目录下的 d/e
第四个参数 '../f.txt'：再往上退一级后，找到 f.txt
所以最终的路径就是：D:\webpack_csdn\a\c\d\f.txt
所以 path.resolve 可以帮助我们把一堆路径整合成一个正确并且合理的路径。
__dirname 就是当前的文件路径。
那么 path.resolve(__dirname, 'dest') 解析出来就是当前路径下的 dest。
这样做有一个好处，就是将来我换环境，换电脑了，这里也不会出错，因为 __dirname 也是跟着一起变的。
那么换了之后，我们就来重新编译：
可以看到，这时候 webpack 就编译成功了，左上角也多出了一个文件夹 dest，里面也多了个 bundle.min.js 文件。
但是我们发现，编译后的 bundle.min.js 居然有 314KB 大小，为什么会这么大呢，我们的 index.js 也就几行代码而已？
这是因为 webpack 能帮助我们来打包，我们的第一行代码不是引入了 jquery 吗，所以 webpack 它就顺带的把整个 jquery 也给打到一起去了。
然后我们在 index.html 里面重新引入打包后的 bundle.min.js。
打开浏览器，可以看到，编译成功。
其实 webpack 用起来挺简单的，它主要的工作量就在 webpack.config.js 上面，通过它的配置，用来指挥 webpack 到底要去做什么。
相信看完这篇博客，大家对 webpack 就有一个最基本的认识了。
