用于 reactjs 应用程序的 webpack 配置中多个入口点的多个module

IT技术 reactjs webpack
2021-05-24 10:47:03

如果有多个入口点，这是我得到的示例：

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 然后访问另一个页面怎么办？

例如，假设我有一个站点example.com和两个其他页面，example.com/register并且example.com/contact. 现在，我想共同文件example.com并加载只登记在module代码example.com/register并接触module代码example.com/contact。入口点是一样的，example.com。上述解决方案在这种情况下是否有效？

1个回答

但是，我对术语条目感到困惑。是指入口网址吗？

不，它是 webpack 开始打包的入口。如果您的 webpack 配置中有多个条目，那么将会有多个输出包。这就是您输出[name].js在文件名中使用 a 的原因。

由您来确保正确的包可用于加载的任何特定页面。

在评论中回答问题：

如果我理解你想要做什么，我相信你可以使用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>
其它你可能感兴趣的问题
上一篇带有开始/暂停和重置按钮的倒数计时器 下一篇使用 TestUtils.Simulate 在输入元素上创建更改事件时遇到问题