Webpack是一个强大的打包工具，它可以将多个模块或文件打包成一个或多个bundle。在前端开发中，我们通常需要将多个JS、CSS和图片等资源打包到一个或多个bundle中，以便于浏览器加载。本文将介绍如何使用Webpack设置多个文件入口和输出。
单一入口和输出
首先，让我们来回顾一下Webpack的单一入口和输出配置。在webpack.config.js文件中，我们可以使用以下方式来设置单一入口和输出：
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};上面的代码中，entry表示入口文件路径，output表示输出文件的配置，其中filename表示输出文件名，path表示输出路径。这里我们只定义了一个入口和一个输出文件。
多入口和输出
现在假设我们的项目有两个页面，分别为home.html和about.html，每个页面都有自己的JS文件和CSS文件。此时，我们需要将它们分别打包成独立的文件，并输出到不同的目录下。下面是如何实现的。
配置多个入口
首先，我们需要在Webpack的配置文件中定义多个入口。我们可以使用对象的形式来定义多个入口，每个入口都对应着一个JS文件。例如：
-- -------------------- ---- -------
-------------- - -
------ -
----- ----------------
------ ----------------
--
------- -
--------- ------------
----- ----------------------- -------
-
--上面的代码中，我们使用了一个对象来定义两个入口，分别为home和about，它们对应了home.js和about.js两个文件。注意到[name]是一个占位符，它会根据入口键名自动替换成对应的值。
配置多个输出
接下来，我们需要将不同的打包结果输出到不同的目录下。我们可以在output的path属性中使用占位符来指定不同的输出路径。例如：
-- -------------------- ---- -------
-------------- - -
------ -
----- ----------------
------ ----------------
--
------- -
--------- ------------
----- ----------------------- --------------
-
--上面的代码中，我们在path属性中使用了[name]占位符，这样Webpack就会根据入口键名自动替换成对应的路径。因此，打包后的home.js文件将被输出到dist/home目录下，而打包后的about.js文件将被输出到dist/about目录下。
HTML文件处理
最后，我们还需要在HTML文件中引入打包后的JS文件。一种简单的方法是使用html-webpack-plugin插件来自动生成HTML文件，并将打包后的JS文件自动引入到HTML中。我们可以在Webpack配置文件中添加以下代码：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -
----- ----------------
------ ----------------
--
------- -
--------- ------------
----- ----------------------- --------------
--
-------- -
--- -------------------
--------- ------------------
--------- ------------
------- --------
---
--- -------------------
--------- -------------------
--------- -------------
------- ---------
--
-
--上面的代码中，我们首先引入了html-webpack-plugin插件，然后在plugins数组中定义了两个实例对象，分别对应home.html
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28057