webpack 基础概念理解

叁歲伎倆 2023-02-11 10:26 7阅读 0赞

#### 一、webpack 基础概念理解 ####

1.  本质上，`webpack` 是一个现代 `JavaScript` 应用程序的静态模块打包器(`module bundler`)。当 `webpack`处理应用程序时，它会递归地构建一个依赖关系图(`dependency graph`)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 `bundle`。 `webpack` 支持 `AMD` (`RequireJS`)、`ES Modules` 和`CommonJS` 等模式，如图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]

1.  `webpack` 在 `V1` 时，功能主要为 编译、打包，`HMR` (模块热更新)，代码分割和文件处理。
2.  `webpack` 在 `V2` 时，功能进化为 `Tree Shaking`，`ES module`，动态 `Import` 和新的文档。
3.  `webpack` 在 `V3` 时，功能进化为 `Scope Hoisting` 作用域提升和`Magic Comments`配合动态`import` 使用，`Scope Hositing`是 `Webpack 3`的标志性特征。
4.  `webpack` 核心概念分为 `Entry`、`Output`、`Loaders` 、`Plugins`和 模式。
5.  `Entry` 是指示 `webpack` 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，`webpack` 会找出有哪些模块和库是入口起点（直接和间接）依赖的，最后输出到称之为 `bundles`的文件中。`Entry`是 代码的入口、打包的入口，单个或多个。
6.  `Output`是告诉 `webpack` 在哪里输出它所创建的 `bundles`，以及如何命名这些文件，默认值为 `./dist`。 `Output` 是 打包成的文件(`bundle`)、一个或多个、自定义规则 和 配合 `CDN`。
7.  `Loaders` 是 让 `webpack` 能够去处理那些非 `JavaScript` 文件（`webpack` 自身只理解 `JavaScript`）。`loader` 可以将所有类型的文件转换为 `webpack` 能够处理的有效模块，然后你就可以利用 `webpack` 的打包能力，对它们进行处理。`Loaders` 是 处理文件和转化为模块。常用的 `loader`，编译相关有`babel-loader`、`ts-loader`等等，样式相关有`style-loader`、`css-loader`、`less-loader`、`postcss-loader`等等，文件相关有`file-loader`、`url-loader`等等。
8.  `Plugins` 是从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。`. Plugins` 是参与打包整个过程、打包优化和压缩、配置编译时的变量和极其灵活。常用`Plugins`，优化相关有`CommonsChunkPlugi`、`UglifyjsWebpackPlugin`等等，功能相关有 `ExtractTextWebpackPlugi`、 `HtmlWebpackPlugin`、`HotModuleReplacementPlugin`和`CopyWebpackPlugin`等等
9.  模式是通过选择`development` 或 `production` 之中的一个，来设置`mode` 参数，你可以启用相应模式下的 `webpack` 内置的优化。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200523111401639.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70#pic_center