前端开发：Webpack的使用总结

前言

在前端开发过程中，尤其是现在前端框架的频繁使用的当下，作为前端开发者想必对于Webpack并不陌生，尤其是在使用Vue框架做前端开发的时候，打包时候必用Webpack。还有就是在前端求职面试的时候，Webpack相关的知识点也是面试官必定考察的，那么本篇博文就来分享一下关于Webpack使用相关的知识点，记录下来，方便后期查阅使用。

Webpack概念

Webpack其实是一个前端资源加载/打包工具，也就是自动化打包解决方案，即模块打包机，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源，也就是把某些浏览器中不能直接运行的拓展打包成合适的格式来方便浏览器直接使用。

备注：Webpack也就是一个打包模块化的工具，在Webpack里面一切文件皆为模块，通过loader转换文件，使用plugin注入钩子，最后输出由多个模块组合成的文件。

 

Webpack打包原理

在项目开发过程中，大致分为两个状态：开发状态和生产状态。在这两种状态下，webpack在打包编译的时候，会采用不同的方式，比如代码是否压缩等。与这两种状态相对应，webpack的配置文件也要分为两个，一个用于开发时候的配置，一个用于上生产时候的配置。但是实际开发过程中，一般不是定义两个配置文件，而是三个，分别为：开发配置、生产配置和公有配置。这样比较便于管理webpack，更清