webpack如何配置多入口文件

发布时间：2026-01-07 15:16:59 作者：小樊
来源：亿速云阅读：97

在Webpack中，配置多入口文件可以通过在entry对象中指定多个键值对来实现。每个键值对的键表示一个入口文件的名称，值表示该入口文件的路径。以下是一个简单的示例：

首先，确保已经安装了Webpack和Node.js。
在项目根目录下创建一个名为webpack.config.js的文件。
编辑webpack.config.js文件，添加以下内容：

const path = require('path');

module.exports = {
  // 配置多入口文件
  entry: {
    main: './src/index.js', // 主入口文件
    about: './src/about.js', // 关于页面入口文件
    contact: './src/contact.js' // 联系页面入口文件
  },
  output: {
    filename: '[name].bundle.js', // 输出文件名，[name]表示入口文件的名称
    path: path.resolve(__dirname, 'dist') // 输出文件路径
  }
};

在这个示例中，我们配置了三个入口文件：main、about和contact。Webpack会分别为这三个入口文件生成对应的输出文件，如main.bundle.js、about.bundle.js和contact.bundle.js。

在src目录下创建相应的入口文件（index.js、about.js和contact.js）以及它们的HTML文件（index.html、about.html和contact.html）。
在HTML文件中，通过<script>标签引入对应的打包后的JavaScript文件，例如：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main Page</title>
</head>
<body>
  <h1>Main Page</h1>
  <script src="main.bundle.js"></script>
</body>
</html>

npx webpack --mode production

打包完成后，在dist目录下会看到生成的输出文件。

这样，Webpack就配置好了多入口文件。你可以根据项目需求继续添加更多的入口文件。

webpack如何配置多入口文件

相关阅读