前言
Webpack 是一个非常流行的前端打包工具，它通过模块化的方式，将各种文件打包成最终的静态资源文件。在实际的开发工作中，我们经常会遇到需要打包多个入口文件的情况，比如基于 Vue 和 React 的前端应用。本文将介绍如何使用 Webpack 打包多入口应用，并提供示例代码，帮助读者深入理解 Webpack 的工作原理。
单入口 vs. 多入口
在讲解多入口打包前，我们先来了解一下单入口的打包方式。Single entry 即单入口，相当于是整个应用程序代码的起点。在单入口应用中，我们只需要将一个入口文件通过 Webpack 打包成一个 JS 文件，然后通过 <script> 标签引入即可。
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
---- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------ ----- ---------------
-------
------
------- ------------------------------
-------
-------但是，在现实应用中往往需要处理多个页面或多个模块，这时候就需要使用多个入口文件进行打包。使用多入口的方式，需要指定多个入口文件，并将它们打包成不同的 JS 文件，最终在 HTML 文件中引入它们。
多入口打包
多入口应用最常见的场景是 SPA 应用，其中多个页面共用相同或不同的模块资源，比如 Vue 的单页面应用或者 React 的单页面应用等。在 Webpack 中，多入口打包可以使用以下两种方式：
- 使用对象语法配置多个入口
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -
----- ----------------
------ -----------------
-------- -------------------
--
------- -
--------- ------------
----- ----------------------- --------
--
--在上面的配置中，我们定义了三个入口文件 home.js，about.js 和 contact.js，Webpack 将分别打包它们，并分别输出对应的文件名 home.js，about.js 和 contact.js，它们的输出路径都是 dist 文件夹。
- 使用数组语法配置多个入口
// webpack.config.js
module.exports = {
entry: ['./src/home.js', './src/about.js', './src/contact.js'],
output: {
filename: 'bundle.js',
path: __dirname + '/dist',
},
};在这种写法中，Webpack 会将多个入口文件的输出结果合并成一个文件，即将 home.js，about.js 和 contact.js 三个文件的打包结果合并到 bundle.js 中。
配置插件
除了使用多入口的方式，我们还需要在 Webpack 中配置插件，让多入口应用能够正常工作。
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
----- ----------------
------ -----------------
-------- -------------------
--
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -------------------
------ -------
--------- ------------
------- ---------
---
--- -------------------
------ --------
--------- -------------
------- ----------
---
--- -------------------
------ ----------
--------- ---------------
------- ------------
---
--
--在这个配置文件中，我们使用了 HtmlWebpackPlugin 插件，它可以将打包好的 JS 文件自动注入到 HTML 文件中，并将 HTML 文件输出到指定位置，这里的位置就是输出路径 dist 文件夹。同时，我们也可以通过 chunks 配置项指定要加载的 JS 文件，这样就避免了不必要的代码执行。
示例代码
下面是一个完整的多入口打包的示例代码，供读者参考。
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
----- ----------------
------ -----------------
-------- -------------------
--
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -------------------
------ -------
--------- ------------
------- ---------
---
--- -------------------
------ --------
--------- -------------
------- ----------
---
--- -------------------
------ ----------
--------- ---------------
------- ------------
---
--
--<!-- src/home.js -->
import sayHello from './modules/hello.js';
sayHello();
console.log('home page');<!-- src/about.js -->
console.log('about page');<!-- src/contact.js -->
console.log('contact page');// src/modules/hello.js
export default function sayHello() {
console.log('Hello!');
}总结
Webpack 是一个非常强大的前端打包工具，它支持多入口应用的打包，并且可以自动引入打包结果到 HTML 文件中，降低了代码执行的冗余。在实际工作中，我们需要根据项目需求选择不同的打包方式，例如单入口或者多入口打包。本文介绍了如何使用 Webpack 打包多入口应用，并提供了示例代码供读者参考。希望读者可以通过本文对 Webpack 的打包原理有一个更深入的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ecbf0968c7c53b0d1e30d