webpack 生命周期 WEBPACK 4.0-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，多个 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 文件，添加以下代码：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

以上代码中，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