在配置的WebPack多个入口点多模块reactjs应用

在多个入口点的情况下，这是我得到的例子：在配置的WebPack多个入口点多模块reactjs应用

module.exports = { 
    entry: { 
     user1: path.join(__dirname, './client/app1.js'), 
     user2: path.join(__dirname, './client/app2.js'), 
     user3: path.join(__dirname, './client/app3.js') 
    }, 
    output: { 
     path: path.join(__dirname, './static/bundle/'), 
     filename: '[name].js' 
    }, 
    ... 
}

但是，我感到困惑的术语entry。这是否意味着输入网址？如果用户访问根目录然后访问另一个页面会怎么样？

例如，假设我有一个网站example.com和另外两个页面example.com/register和example.com/contact。现在我想为example.com获取公共文件，并且只加载example.com/register中的注册模块代码，并且联系example.com/contact中的模块代码。入口点是相同的，example.com。上面的解决方案在这种情况下工作？

来源

2017-05-24 learner

但是，我对术语条目感到困惑。这是否意味着输入网址？

不。它是webpack开始打包的入口。如果您的webpack配置中有多个条目，则会有多个输出包。这就是为什么你输出在文件名中使用。

您需要确保正确的软件包可用于加载的任何特定页面。在评论

答题：

如果我明白你正在尝试做的，我相信你可以使用CommonsChunkPlugin建立一个共同的包和每个页面的条目。

所以你的WebPack配置可能类似于

module.exports = { 
    entry: { 
     index: path.join(__dirname, './src/index.js'), 
     register: path.join(__dirname, './src/register.js'), 
     contact: path.join(__dirname, './src/contact.js') 
    }, 
    output: { 
     path: path.join(__dirname, './static/bundle/'), 
     filename: '[name].js' 
    }, 
    plugins: [ 
     new CommonsChunkPlugin("commons.js") 
    ] 
    ... 
}

然后你的索引页会是这样

<html> 
    <head></head> 
    <body> 
     ... 
     <script src="static/bundle/commons.js"></script> 
     <script src="static/bundle/index.js"></script> 
    </body> 
</html>

和寄存器页面会像

<html> 
    <head></head> 
    <body> 
     ... 
     <script src="static/bundle/commons.js"></script> 
     <script src="static/bundle/register.js"></script> 
    </body> 
</html>

而且联系页面可能类似于

<html> 
    <head></head> 
    <body> 
     ... 
     <script src="static/bundle/commons.js"></script> 
     <script src="static/bundle/contact.js"></script> 
    </body> 
</html>

来源

2017-05-24 11:21:51

感谢您的回复。我怎样才能决定我有哪些条目？例如，在上述情况下，我已经描述了我的网站（example.com）的场景。根据这个网站配置，你能解释一下吗？ – learner

已更新的答案 –

感谢您的洞察力。这是我正在寻找的。还有一件事，我现在正在做出反应。作为SPA，反应只有一个index.html文件。我怎样才能确保在每种情况下加载相应的包？ – learner

在配置的WebPack多个入口点多模块reactjs应用

回答

相关问题