Webpack 中如何正确配置多个入口文件？

Air-东宁提问于 2026-03-27 13:30:21 阅读 28

工具

我项目里需要打包两个页面，每个页面有自己的 JS 入口，但照着文档配了 entry 之后，输出的 bundle 好像互相覆盖了，只生成了一个文件。

我试过这样写配置：

module.exports = {
  entry: {
    pageA: './src/pageA.js',
    pageB: './src/pageB.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

结果 dist 目录下只有 bundle.js，而且是 pageB 的内容。是不是 output.filename 没写对？应该改成啥？

我来解答赞 7 收藏

反馈

1 条解答

码农思捷 Lv1

output.filename 确实有问题，这样写只会生成一个固定的 bundle.js。你需要用 [name] 占位符来区分不同的入口文件。直接用这个：

module.exports = {

  entry: {

    pageA: './src/pageA.js',

    pageB: './src/pageB.js'

  },

  output: {

    filename: '[name].bundle.js',

    path: path.resolve(__dirname, 'dist')

  }

}

这样配置后，pageA 的输出会是 dist/pageA.bundle.js，pageB 的输出会是 dist/pageB.bundle.js。记得路径别写错了，不然打包时找不到地方。这事儿折腾过好几次，每次都要检查半天，烦死了。不过现在这样写基本不会出错。

2026-03-27 13:37