Question

我想将我的反应应用程序分为两部分。将有一个登录页面对有效用户进行身份验证，一旦通过身份验证，我将呈现实际的Web应用程序。为此，我想我需要两个html文件。

我认为每个html文件可能会使用两个不同的包。所以我的login.html可能会使用以下脚本...

<script type="text/javascript" src='./scripts/bundle.js'></script>

我的index.html将使用...

<script type="text/javascript" src='./scripts/bundle2.js'></script>

但是如何在webpack中输出两个包呢？

这是我的......

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

  devtool: 'source-map',
  output: {
    path:'/',
    filename: 'scripts/bundle.js',
    publicPath: '/'
  },

  module: {
    ...etc,etc.

正如您所看到的，我的唯一入口点是/src，这是我当前index.js文件所在的位置，用于填充index.html。

用于填充index.js的{{1}}文件位于foler login.html中。但是以下条目不会做我想要的......

Authentication

我需要为这些html文件中的每一个提供两个输出，因为它们必须彼此分开。我有什么选择？有没有办法，或者可能是另类，以实现我想要的目标？

Answer 1

将捆绑包拆分为多个文件非常常见。 Webpack的文档为此提供了一个很好的解释 - Link

因此，如果您想要为应用创建多个入口点，只需将其作为key: value对在入口点中传递，如下所示：

{
    entry: {
        a: "./a",
        b: "./b",
        c: ["./c", "./d"]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].entry.js"
    }
}

生成的最终文件为a.entry.js，b.entry.js等等。

webpack的多个输出

1 个答案: