一步到位：掌握Webpack 多入口脚手架配置秘诀

2023-12-08 10:11:51

前言：

在现代 Web 开发中，Webpack 已成为构建和打包前端资产的必备工具。其多入口特性允许我们从不同的入口文件生成多个捆绑文件，从而提升应用程序的模块化和可维护性。本教程将一步一步指导您配置一个多入口 Webpack 脚手架，让您轻松构建多入口应用程序。

步骤 1：配置 Webpack.base.conf.js

首先，在您的项目根目录中创建或更新 webpack.base.conf.js 文件。此文件包含 Webpack 的基本配置。

const path = require('path');

module.exports = {
  context: path.resolve(__dirname, 'src'), // 基础目录
  entry: {
    // 入口文件
    index: './index.js',
    page1: './page1.js',
    page2: './page2.js',
  },
};

在 context 字段中，指定应用程序的基础目录。在 entry 字段中，列出您要包含在捆绑文件中的所有入口文件。每个入口文件将生成一个单独的捆绑文件。

步骤 2：优化 SEO

为了优化 SEO，我们需要在 webpack.base.conf.js 文件中配置一些额外的字段。

module.exports = {
  ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
  ...
};

这将告诉 Webpack 为公共代码创建额外的代码块，从而减少捆绑文件的大小。

步骤 3：生成捆绑文件

在终端中运行以下命令来生成捆绑文件：

webpack --config webpack.base.conf.js

这将在 dist 目录中生成包含多个捆绑文件的输出目录。

步骤 4：创建 HTML 引用

接下来，我们需要创建 HTML 文件来引用生成的捆绑文件。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <script src="./dist/index.js"></script>
  <script src="./dist/page1.js"></script>
  <script src="./dist/page2.js"></script>
</body>
</html>