【Hello，前端！】Webpack 入门实践｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第15天。今天我们

这是我参与「第四届青训营」笔记创作活动的第15天

今天我们来聊一聊前端经常使用的 Webpack 打包工具。

Webpack 介绍

Webpack 是一个前端的构建工具，负责资源加载和项目打包。一般来说，开发环境的代码往往存在很多冗余，在生产环境我们需要更高效的执行代码。所以我们需要在不改变代码功能的前提下，重构并压缩代码。同时因为生产环境的代码是完全暴露的，为了保护我们的核心代码，需要通过一定的混淆来使之进行一定程度的加密。

构建工具需要实现以下功能：

编译代码，将开发环境中的 Less、Sass、TypeScript 等扩展语法编译为可被浏览器直接使用的 CSS、JavaScript 代码。
处理模块化，将 CSS、JavaScript 中的模块化语法进行处理。
混淆代码，将开发环境代码进行混淆加密。
压缩代码，将开发环境的代码进行压缩，生成能够高效运行的 HTML、CSS、JavaScript 代码。

如何使用 Webpack

下载安装

Webpack 是基于 Node.js 实现的，所以我们首先要安装 Node.js，到Node.js官网下载适合本设备的版本，然后使用以下命令来查看 Node.js 是否安装成功：

node -v

安装时最好选择较新的 Node.js 版本，否则可能不支持 Webpack。

然后使用 npm 命令全局安装 Webpack：

npm install -g webpack

配置

新建一个空文件夹作为项目目录，执行初始化命令：

npm init

根据提示配置项目的名称、版本、描述、开发者等信息，然后会自动生成配置文件 package.json :

{ 
    "name": "example",
    "version": "1.0.0",
    "description": "for introduction",
    "main": "index.js",
    "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1" 
    },
    "author": "lynnshen",
    "license": "ISC" 
}

再运行命令将 Webpack 安装到 devDependencies:

npm install --save-dev webpack

此时 package.json 中将多出一条配置：

"devDependencies": {
    "webpack": "^5.74.0"
}

安装脚手架

在 webpack 4 以上的版本，需要搭配脚手架使用，安装命令如下：

npm install -g webpack-cli npm install --save-dev webpack-cli

同样 package.json 中的 devDependencies 配置会更改：

"devDependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
}

创建项目

在项目根目录创建 index.html，作为我们的项目主页面。然后在根目录创建入口文件 app.js 和工作脚本 work.js，各文件内容如下：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src='./dist/main.js'></script> 
    <div>webpack demo</div> 
</body>
</html>

app.js

var dt = require('./work.js')

work.js

document.write('webpack demo')

打包

在根目录执行打包命令，就可以将项目进行打包：

webpack ./src/app.js

打包成功提示：此时根目录会生成一个 dist 文件夹，里面就是打包好的js文件：

可以看到 Webpack 将代码打包成了一行，几乎无法进行阅读，起到了混淆和压缩的作用。

Webpack 的工作流程

通过上面的介绍和简单实践，我们大概了解了 Webpack 是怎样安装和使用的，那么 Webpack 是怎么样实现打包构建工作的呢，大概是以下这样一个流程：

参数初始化：从配置文件和 Shell 语句中读取参数，合并后得出预备参数；
编译代码：使用参数对 Compiler 对象进行初始化，加载项目的插件，执行对象的 run 方法以进行编译；
确定入口文件：根据配置中的 entry 找出入口文件；
编译模块代码：从入口文件出发，调用所有配置的 Loader 来翻译模块，然后找出依赖模块，递归直到所有入口依赖的文件都经过翻译处理。最终呈现出一个最终的翻译内容和依赖关系表达；
导出资源：根据入口文件和模块之间的依赖关系，将模块组装成一个个的 Chunk，再把每个 Chunk 转换成一个单独的文件添加到输出列表；
完成打包：根据配置确定输出的路径和文件名，把打包好的内容导出到指定位置。

【Hello，前端！】Webpack 入门实践｜ 青训营笔记