Webpack 多个 entry 入口的配置技巧-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Webpack 是一款非常流行的模块打包工具。它可以将多个模块打包成一个或多个 bundles，同时支持多种模块类型，如 JavaScript、CSS、图片等。同时，Webpack 还支持多个 entry 入口，使得Web 应用程序更加灵活且易于维护。本文将探讨如何在Webpack 中配置多个 entry 入口。

什么是 entry

在 Webpack 中，entry 是一个指定要打包的应用程序的入口文件。Webpack 会从入口文件开始打包，并遍历依赖树，将依赖的模块打包到一个或多个输出 bundle 中。

单个 entry 入口

在单个 entry 入口的场景下，我们只需要在 webpack.config.js 中指定一个入口文件即可，例如：

module.exports = {
  entry: './src/index.js',
  ...
}

多个 entry 入口

在某些情况下，我们需要将应用程序分为多个部分，每个部分都有一个单独的 entry。Webpack 支持多个 entry 入口，使得我们可以将应用程序分割成多个逻辑部分，并分别打包输出。

例如，我们可以在 webpack.config.js 中配置如下多个 entry 入口：

 module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js',
    ...
  },
  ...
}

在上例中，我们配置了两个 entry 入口：app 和 admin，他们都指向不同的入口文件（app.js 和 admin.js）。Webpack 将会创建两个 bundle，每个 bundle 包含其对应的 entry 入口及其所有依赖项。

配置多个 entry 入口的坑

在配置多个 entry 入口时，需要注意以下点：

1. 生成多个 bundle

每个 entry 入口都会生成一个 bundle 文件，这会增加文件数量和大小。我们需要确保每个 bundle 文件都只包含必要的内容，并考虑采用一些优化技术（如代码分割）来最小化打包后的文件大小。

2. 处理公共模块

各个 entry 入口可能会共享一些模块，我们需要确保这些模块不会被重复打包。Webpack 提供了几种方案：

使用 CommonsChunkPlugin 插件将公共模块打包成一个单独的文件。
使用 SplitChunksPlugin 插件将代码分割成更小的块，以便更好地实现缓存。

3. 管理 chunk 文件名

在多个 entry 入口的情况下，我们需要管理输出文件的名称。Webpack 可以通过占位符来管理 chunk 的名称，并支持多个入口的 chunk 文件名不能重复。

例如，我们可以在 webpack.config.js 中这样来配置 chunkFileName：

 module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js',
    ...
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].[chunkhash:8].js',
    ...
  },
  ...
}

在上例中，我们使用了占位符 [name] 来表示入口文件的名称，占位符 [chunkhash:8] 来表示每个 chunk 文件的 hash 值。Webpack 会在打包时根据入口文件以及代码中的 require/import 语句自动生成文件名，避免文件名重复。

示例代码

假设我们的应用程序有两个部分：app 和 admin，app 部分依赖了 jQuery 库，admin 部分依赖了 Vue.js 库。我们可以这样配置多个 entry 入口：

module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js',
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].[chunkhash:8].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
...
}

在上例中，我们通过 SplitChunksPlugin 插件将公共的第三方库打包成一个 vendors.js 的文件，并使用占位符管理输出文件名。

app.js 入口文件：

import $ from 'jquery';
console.log('app entry');
console.log($().jquery);

admin.js 入口文件：

import Vue from 'vue';
console.log('admin entry');
console.log(Vue);

最终输出的 bundle 文件为：

dist/
 |-app.js
 |-admin.js
 |-vendors.js

总结

本文介绍了如何在Webpack 中配置多个 entry 入口，同时也提醒了在配置多个 entry 入口时需要注意的一些坑。多个 entry 入口的配置可以帮助我们更好地管理应用程序，并优化打包后的文件大小和性能。最后，我们也展示了相应配置的实例代码，希望读者可以借此来学习和实践。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b1b96aadd4f0e0ffaecfdf