用于 reactjs 应用程序的 webpack 配置中多个入口点的多个模块 [英] Multiple modules for multiple entry points in webpack config for reactjs app
问题描述
在多个入口点的情况下，这是我得到的示例:
In case of multiple entry points, this is the example I got:
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 感到困惑.是指入口网址吗?如果用户访问 root 然后访问另一个页面怎么办?
But, I am confused about the term entry. Does it mean the entry url? What if user visits to root and then visits another page?
例如，假设我有一个网站 example.com 和另外两个页面 example.com/register 和 example.com/contact.现在我想获取 example.com 的通用文件，并只加载 example.com/register 中的注册模块代码和 example.com/contact 中的联系模块代码.入口点是相同的，example.com.上述解决方案在这种情况下是否有效?
For example, suppose I have one site example.com and two other pages example.com/register and example.com/contact. Now I want to get common files for example.com and load only register module code in example.com/register and contact module code in example.com/contact. The entry point is same, example.com. Will above solution work in this scenario?
推荐答案
但是，我对条目一词感到困惑.是指入口网址吗?
But, I am confused about the term entry. Does it mean the entry url?
没有.是 webpack 开始打包的入口.如果您的 webpack 配置中有多个条目，那么将会有多个输出包.这就是为什么您的输出在文件名中使用 [name].js.
No. It is the entry for webpack to start bundling. If you have multiple entries in your webpack config, then there will be multiple output bundles. This is why you output uses a [name].js in the filename.
确保正确的捆绑包可用于加载的任何特定页面.
It is up to you to make sure the correct bundle(s) are available to any particular page that is loaded.
在评论中回答问题:
如果我理解你想要做什么，我相信你可以使用 CommonsChunkPlugin 为每个页面构建一个公共包和一个条目.
If I understand what you are trying to do, I believe you can use CommonsChunkPlugin to construct a common bundle and an entry for each page.
所以你的 webpack 配置可能看起来像
So your webpack config might look something like
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")
]
...
}
然后你的索引页面会是这样的
Then your index page would be something like
<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>
这篇关于用于 reactjs 应用程序的 webpack 配置中多个入口点的多个模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
