webpack5 学习系列 —— 基本概念

刚开始工作的一段时间内，对项目配置文件有深深的抗拒心理，只敢npm run dev，生怕一不小心动了些什么配置，它就跑不动了…

随着经验的增长，当然，也是对自己有了更高的要求，想成为更优秀的工程师，于是就开始研究webpack，并慢慢上手实践于项目中。

学习过程中的一些知识，就记录了下来，方便以后随时查看。

基本概念

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示内容。

入口(entry)

初始化项目配置中的 entry 字段指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。

进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值是 ./src/index.js，但可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。

示例

webpack.config.js

module.exports = {
   
  entry: './path/entry/another.js',
};

输出配置（output）

项目配置中的 output 字段告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

可以通过在配置中指定一个 output 字段，来配置这些处理过程：

示例

webpack.config.js：

const path = require('path'); //  path 是一个 Node.js 核心模块，用于操作文件路径

module.exports = {
   
  entry: './path/entry/another.js'