如果有多个入口点，这是我得到的示例:
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'
},
...
}
但是，我对“条目”一词感到困惑。是指入口url吗？如果用户访问 root 然后访问另一个页面怎么办？
例如，假设我有一个网站 example.com 和另外两个页面 example.com/register 和 example.com/contact 。现在我想获取 example.com 的通用文件，并仅加载 example.com/register 中的注册模块代码和 example.com/contact 中的联系人模块代码。入口点相同，example.com。上述解决方案在这种情况下有效吗？
最佳答案
But, I am confused about the term entry. Does it mean the entry url?
没有。是webpack开始打包的入口。如果你的 webpack 配置中有多个条目，那么将会有多个输出包。这就是您输出的文件名中使用 [name].js 的原因。
您需要确保正确的 bundle 可用于加载的任何特定页面。
<小时/>回答评论中的问题:
如果我明白你想要做什么，我相信你可以使用CommonsChunkPlugin为每个页面构建一个公共(public)包和一个条目。
所以你的 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>
关于reactjs - Reactjs 应用程序的 webpack 配置中的多个模块用于多个入口点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44156492/