JavaScript 中怎么使用 Webpack 配置多入口打包构建-js教程-PHP中文网

webpack多入口打包需将entry设为对象（如{index:'./src/index.js'}），配合output.filename='[name].js'生成对应js文件，并为每个html配独立htmlwebpackplugin实例，通过chunks选项精准控制引入的js；可用glob动态生成entry和插件；devserver需配置historyapifallback避免404。

javascript 中怎么使用 webpack 配置多入口打包构建

Webpack 配置多入口打包，核心是把 entry 从单个路径改为对象，每个键对应一个页面的 JS 入口，并配合 HtmlWebpackPlugin 实例一一映射 HTML 输出。这不是加几行配置就能跑通的事，关键在于建立“入口 → chunk → HTML”的明确对应关系。

entry 必须是对象，键名决定输出文件名

不能写成数组或字符串，必须是形如 { index: './src/index.js', admin: './src/admin.js' } 的对象。每个 key（比如 index）会成为最终生成 JS 文件的名称——配合 output.filename: '[name].js'，就输出 index.js 和 admin.js。Webpack 会为每个入口单独构建依赖图，但公共模块可被自动提取复用（靠 optimization.splitChunks）。

每个 HTML 页面配一个 HtmlWebpackPlugin 实例

光有多个入口还不够，得让每个 HTML 文件只加载它需要的 JS。这靠 chunks 选项控制：

new HtmlWebpackPlugin({ filename: 'index.html', template: 'src/index.html', chunks: ['index'] })
new HtmlWebpackPlugin({ filename: 'admin.html', template: 'src/admin.html', chunks: ['admin'] })

如果某个页面既要主逻辑又要独立模块，比如登录页需 main 和 login，就写 chunks: ['main', 'login']——前提是这两个名字都在 entry 或 splitChunks 中定义过。

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

入口太多时，用 Node 脚本动态生成

手动维护几十个 entry 和插件容易出错。推荐用 glob.sync 扫描目录，再用 reduce 构建 entry 对象：

比如扫描 ./src/pages/*/index.js，提取出 login、dashboard 等页面名
用 reduce 把它们转成 { login: ['./src/pages/login/index.js'], dashboard: ['./src/pages/dashboard/index.js'] }
同时生成对应数量的 HtmlWebpackPlugin 实例

这样新增一个 src/pages/report/index.js，不用改 webpack 配置，重新打包就自动支持。