在前端开发中，多个 JavaScript 文件需打包合并成一个文件以减少 HTTP 请求，提高页面性能。Webpack 就是一个著名的打包工具，能实现这一目的。
Webpack 4.0 版本中引入了生命周期（Lifecycle），生命周期包括以下阶段：
entry option：解析配置文件，生成编译上下文对象，进行模块编译前的设置。before run：开始编译前执行的插件。run：编译阶段，Webpack 开始生成产出文件，执行插件。emit：生成产出文件之前执行，可以修改最终输出的内容，执行插件。after emit：打包后插件的执行。done：完成打包后的最后阶段，运行插件。
除生命周期外，Webpack 4.0 还提供了 hook(钩子)，可用于在生命周期的不同阶段装载插件，你可以根据需要在不同的 hook 上进行插件的装载，以达到定制化打包的目的。
下面是一个使用 Webpack 4.0 进行打包的示例：
在 package.json 文件中添加以下代码，引入 Webpack：
{
"dependencies": {
"webpack": "^4.0.0"
}
}然后在项目中新建一个 index.html 文件。
在项目目录中运行以下命令：
npm install npm install --save-dev webpack
接下来在根目录中创建一个 webpack.config.js 文件，添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- ----------
---- ---------------- --------------
--
--
--
--以上代码中，mode设置为开发模式，entry指明源文件路径，output指明打包生成文件的路径和文件名。
在 module.rules 中定义规则来对项目中的不同类型文件进行打包，比如 css 文件。
现在，在源代码目录 src 中新建一个 index.js 文件和一个 style.css 文件。 index.js文件如下：
import './style.css';
document.write('Hello webpack!');在 style.css 文件中只写入了一行样式：
body {
background: red;
}最后在终端中执行 webpack 命令进行打包：
webpack
打包生成的文件将会存放在 dist/bundle.js ，打开 index.html 文件即可看到效果。
总结：
Webpack 的生命周期是一个非常重要的部分，掌握生命周期可以帮助你更好地了解 Webpack 的工作流程。在实际的开发中，我们可以基于生命周期控制插件的执行，让 Webpack 更加灵活。本文介绍了 Webpack 4.0 生命周期和一个简单的打包示例，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b8b8ceadd4f0e0ff14d283