初步理解Webpack原理

初步理解Webpack原理

曾经在项目中使用过 webpack 进行打包，之后也使用过 vue-cli 这样的基于 webpack 的脚手架构建项目，那今天就来学习一下 webpack 的原理。webpack5已经也许今年就要发布正式版了，不同版本的配置方法都不尽相同，所以这篇文章不涉及任何具体的配置～

注： 本文中所有代码仅有示意的作用，不一定是 Webpack 的真实运行结果～

什么是Webpack

首先先对Webpack有一个大致的印象（看上面的图片），Webpack是一个模块打包器，根据模块之间的依赖关系生成新的静态文件资源。

另外，有另外两个工具——Gulp 和 Grunt，经常被拿来和 Webpack 进行对比。我并没有使用过那两个工具，不敢妄加评价，但是要认识到它们和Webpack的设计出发点是不同的。我的理解：Gulp 和 Grunt 是用在开发阶段，优化开发流程的；Webpack 是用来进行打包构建生产环境版本的，但是在各种loader的加持下，Webpack 已经很大程度上取代了Gulp 和 Grunt的功能，

打包过程中Webpack做了什么

分析依赖

在前面也提到了，Webpack 的目的是根据模块之间的依赖关系进行打包，那么首先应该分析模块之间的依赖关系。

首先我们要指定入口文件，这个告诉Webpack从什么地方开始构建依赖关系。

// webpack.config.js