本文解析webpack在模块化和打包中的核心作用，探讨loader与plugin的区别，以及dev-server的实战应用，带你走进高效前端构建的世界。
目录：
🍓前言
在前端开发过程中，webpack是我们绕不开的一个工具，这篇文章我们就来一起分析分析webpack到底是个什么工具；
🍓webpack是什么？
从本质上来说，webpack是一种前端资源构建工具，是一个静态模块打包器；
在webpack看来，前端的所有资源文件都会被作为模块处理；
它会根据模块的依赖关系进行静态分析，打包生成对应的静态资源；
但是webpack本身默认只对JavaScript文件进行处理，其他类型的文件需要配置loader或者plugins进行处理；
webpack将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求；
了解webpack的重点就在于两个关键字：模块和打包；
下面我们来剖析一下这两个关键字；
🍓一、模块化
就像一个公司由各个部门组成，一个工程也由各个模块组成，高内聚低耦合，各司其职；
为了说明模块化的重要性，我们举个例子：
在传统js写法中，如果引入多个script，就很容易造成全局作用域冲突而导致不可预测的问题；
为了解决这个问题，我们可以在script内定义局部作用域；
但是这样无法保证模块内属性的安全性，这里要使用立即执行函数进行改写，形成闭包；这就是模块化；
优点
1）、可复用
2）、低耦合
3）、模块化的封装
模块化方案
前端有一些模块化方案，如：AMD、CMD、CommonJS、ES6，浏览器并不能识别他们，但是webpack可以为它们做一个底层支撑，进行模块化开发；
1）、commonjs：本来是服务端的规范，后来nodejs采用commonjs模块化规范
2）、目前来说使用最多的是es6 module；
ES6之前，如果想要进行模块化开发，就必须借助于其他的工具才可以进行模块化开发；并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并将其进行整合打包，非常麻烦；
🍓二、打包
根据import、require等引入关键字，webpack将依赖文件打包成一个文件；
将各个资源模块进行打包合并成一个或者多个包(bundle);
在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转化成css，将es6语法转化成es5语法，将ts转化成js；
为什么打包？
1）、各个依赖文件的关系难以梳理，耦合度较高，代码难以维护
2）、把所有依赖包都打包成为一个js文件，会有效降低文件请求次数，一定程度上提升性能；
3）、逻辑多、文件多，项目复杂度高
webpack的打包过程
1）、从入口文件开始，分析整个应用的依赖，形成一个依赖树；
2）、将每个依赖模块包装起来，放到一个数组等待调用；
3）、实现模块加载的方法，并把它放到模块执行环境中，确保模块间可以互相调用；
4）、把执行入口文件的逻辑放到一个函数表达式中，并立即执行这个函数；
其他打包工具
打包工具还有grunt/gulp;
1）、gulp的核心是task
首先你需要配置一系列的任务，并且定义任务要处理的事务，（例如ES6、ts转化、图片的压缩、scss转化成css）
之后让gulp依次执行这些task，让整个流程自动化；
2）、什么时候使用gulp？
如果工程模块的依赖非常简单，甚至于没有使用到模块化的概念，只需要进行简单的合并、压缩，那么使用gulp即可；
如果整个项目使用了模块化管理，而且相互依赖非常高，我们就可以使用webpack；
3）、gulp和webpack的区别在哪？
gulp更加强调前端流程的自动化，模块化不是核心；
webpack更加强调模块化开发管理，而文件压缩合并、预处理等等都是他附带的功能；
🍓三、loader
loader是webpack中一个非常核心的概念；
我们先来思考一下webpack是用来做什么的？
我们主要使用webpack来处理js代码，并且webpack会自动处理js之间相关的依赖；
但是，在开发中不仅仅只有基本的js代码需要被处理，也需要加载css、img、也包括将一些高级的ES6的转化成ES5、将ts转化成es5，将scss、less转化成css、将.jsx，.vue转化成js文件；
对于webpack本身的能力来说，这些转化是不支持的；
此时给webpack扩展对应的loader就可以了；
🍓四、plugin
plugin就是插件，通常是对某个现有的架构进行扩展；
webpack中的插件，就是对webpack现有功能的各种扩展，比如：打包优化，文件压缩；
loader和plugin的区别
1）、loader主要是用于转化某些类型的模块，它是一个转化器；
2）、plugin是插件，它是对webpack本身的一个扩展，是一个扩展器；
🍓五、dev-server
webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示修改后的结果；
不过它是一个单独的模块，在webpack中使用之前需要安装webpack-dev-server；
具体使用这里不讨论；
🍓结束语🏆
感谢大家的支持，抱拳了！！！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
