Question

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

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的公共文件，只加载example.com/register中的寄存器模块代码，并联系example.com/contact中的模块代码。入口点相同，example.com。以上解决方案是否适用于这种情况？

Answer 1

但是，我对入境一词感到困惑。这是指输入网址吗？

没有。这是webpack开始捆绑的条目。如果您的webpack配置中有多个条目，那么将有多个输出包。这就是输出在文件名中使用[name].js的原因。

您可以确保所加载的任何特定页面都可以使用正确的包。

在评论中回答问题：

如果我理解您要做的事情，我相信您可以使用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>

用于reactjs app的webpack配置中的多个入口点的多个模块

1 个答案: