这是我参与「第四届青训营」笔记创作活动的第8天。
什么是Webpack
首先什么是webpack？直译过来就是网络包装，顾名思义Webpack就是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
如果我们以面向过程的方式来进行代码整合，就会使得很多js代码都挤在一块，会使代码显得冗长、杂乱，不具备层次，难以调试。
如果我们面向对象开发（将整块代码按功能分块，实现代码的模块化，实现一个代码块负责一部分页面逻辑），虽然代码结构清晰，但是也存在缺点，就是可能导致页面加载速度很慢，而且js文件要严格按照顺序加载，否则就会报错。
这时候就需要用到webpack了。Webpack会分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Webpack安装
Webpack的运行需要依赖Node.js，然后再通过npm来安装Webpack
通过下面两行代码即可完成webpack的安装
$ cnpm install -D webpack
$ cnpm install -D webpack-cli
因为我用的是淘宝npm镜像，所以前缀就是cnpm，如果没有淘宝镜像的话就直接把cnpm换成npm就行了。
如何运行Webpack
- 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
- webpack 就会去项目的根目录中，查找一个叫做
webpack.config.js的配置文件 - 找到配置文件后，webpack 就会解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
- 当 webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建
- 如果 webpack 发现既没有 webpack 命令 ，也没有配置文件，他就会报错
