1. 什么是webpack
webpack就是一个打包工具，它所做的事情就是：分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
2. 我们为什么要使用webpack
现如今许多网页可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。
因此我们就想到了：
- 模块化，模块化的功能就是让我们把复杂的程序细化为小的文件。
- TypeScript语言
- scss、less等css预处理器
……
由于上述的改进大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为webpack工具的出现提供了需求。
3. 正式开始使用webpack来打包一个项目
在终端中进行操作，在这里我介绍一下在vscode中如何打开终端，快捷键：ctrl加上数字1左边那个按键（~）即可打开终端。
由于webpack本质上是node.js来写的，因此我们需要先安装node环境，安装完之后可以用：”node -v”和”npm -v”进行一个查看，如果出现对应的版本号则证明你安装成功了。由于下载node.js很简单，在这里我就不再演示了，给大家附一个地址可以照着它进行一个安装:http://www.runoob.com/nodejs/nodejs-install-setup.html
在这里给大家再介绍一下什么是npm，一句话简单的给大家说一下：npm是包管理工具（就相当于项目），然后你可以通过npm命令来下载你想要的包，下载的命令是:npm install 包名
在这里还需要注意的一点是：npm是外国服务器，所以下载很慢，有时会用npm下载会报错，大家可以尝试用yarn或者cnpm淘宝镜像来下载。给大家一篇写的不错的文章来介绍yarn以及下载过程，链接如下所示：https://neveryu.github.io/2018/07/20/yarn/
在下载webpack之前，我们需要做的一个就是生成一个项目说明书（package.json文件），方便后期我们进行一个维护，执行命令：npm init。输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。
下载webpack，执行命令：npm install webpack –save-dev
下载webpack命令行工具（它的作用就是减少我们的成本），执行命令：npm
install webpack-cli –save-dev
（在这里给大家介绍一下”–save-dev”是你开发时候依赖的东西，”–save”是你发布之后还依赖的东西）
此时webpack安装到了node_modules文件夹下面，当我们点开node_modules文件夹时，会发现它下面有许多的文件，其原因是因为依赖的原因。
由于webpack-cli在.bin目录下，因此你需要进入到:./node_modules/.bin/webpack -v来查看它的一个版本
如果你执行./node_modules/.bin/webpack命令，运行后它会报错，错误信息提示你缺少src文件，其原因是因为它会默认去src文件下面找index.js文件。因此解决办法就是在当前文件下面添加src文件，以及在src文件里面添加index.js文件，然后再运行就不会报错了，并且还会在当前文件下面生成一个dist文件，dist文件下面会有一个main.js文件（虽然index.js文件里面我们暂时还没有写代码，但是打包的文件main.js下面有一部分的代码，其原因是因为它会做一定的处理。）
下面就给大家看看文件之间的一个层级关系，避免大家添加src文件和index.js文件出错，如下图所示：
由于./node_modules/.bin/webpack这样写太费劲了，并且在cmd下面这样写会报错，因为cmd不支持这样的写法。因此我们有更好的解决办法，那就是在package.json说明书里面的”scripts”脚本中进行一个修改，如下图所示：
[](https://s2.ax1x.com/2019/07/06/Z0EGfP.png “执行”scripts”脚本里面的内容”)
然后再执行命令：npm run webpack
此时当你运行完后，你会看到终端给你一个警告提示，它会告诉你没有”mode”这个选项，mode表示当前的模式。主要有2个模式，一个是development开发模式（代码没有进行一个压缩），一个是production生产模式（代码进行一个压缩）。默认的是production生产模式。其实除了开发和生产模式之外，还有一个none模式，表示什么都不做。我们可以在”scripts”脚本中写入下图所示的内容：
执行命令:npm run dev是一个开发模式的，此时你去看dist文件夹下面的main.js文件中的代码是没有压缩的；当你执行命令:npm run prod是一个生产模式的，此时你去看dist文件夹下面的main.js文件中的代码是压缩的。你可以亲自试一试、看一看是不是和我写的是一样的。
由于每一次修改了文件，都得重新给它打包一次，所以很麻烦，因此有一个watch监听模式。此时我们可以在”scripts”脚本中修改内容为如下图所示：
执行命令：npm run prod时，当你在src文件下面的index.js文件中修改内容时，打包出来的dist文件下的main.js文件的内容会进行一个自动更新，这样就省去了我们每一次都要重新给它打包的次数。
最后再给大家讲解一下什么是tree shaking，它的作用就是把当前死代码给去掉了，打包的时候它会自动的去分析哪些用到还是没有被用到。如果大家对tree shaking感兴趣的话，可以去官网的指南下面找找tree shaking。下面我就直接附上tree shaking的链接了：https://www.webpackjs.com/guides/tree-shaking/
今天分享的是webpack最为基础的一部分，在下一次的分析中我会给大家分享webpack更加深入的一部分。
