Question

将split chunks plugin与以下配置一起使用：

{
    entry: {
        entry1: [entry1.js],
        entry2: [entry2.js],
        entry3: [entry3.js],
        ...
    }
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    } 
}

代码将完全分解为：

vendors-entry1-entry2-entry3.js // common for all
vendors-entry1-entry3.js // vendors only required by both entry1, entry3
entry1-entry2.js // common code of entry1 and entry2
entry1.js // unique entry's code
entry2.js
entry3.js

问题是，我现在如何在我的html中使用每个条目的特定供应商（或在我的特定情况下使用ejs）？

按照建议使用HtmlWebpackPlugin只会创建一个index.html来加载上述所有内容，尽管用例很明显：

渲染 entry1 页面时 - 加载：

vendors-entry1-entry2-entry3.js
vendors-entry1-entry3.js
entry1-entry2.js
entry1.js

渲染 entry2 页面时 - 加载：

vendors-entry1-entry2-entry3.js
entry1-entry2.js
entry2.js

等。

Answer 1

HtmlWebpackPlugin的版本4（目前为alpha）自动包含所有条目的生成块。因此，只需设置repositories { google() mavenLocal() jcenter() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } }即可：

chunks: 'entry1'

...并导致将所有相关的块注入html文件：

new HtmlWebpackPlugin({
    template: 'entry1.ejs',
    filename: 'entry1.html',
    chunks: ['entry1']
}),

您可以使用

进行安装

<script src="/vendors-entry1-entry2-entry3.js">
<script src="/vendors-entry1-entry3.js">
<script src="/entry1-entry2.js">
<script src="/entry1.js">

Answer 2

我遇到类似的问题，并且使用我发现的here配置设置取得了一些次要的成功。不知道它是否适用于您的特定用例，但我想我会分享。

webpack配置中的优化哈希看起来像：

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2,
                    minSize: 0
                }
            }
        },
        occurrenceOrder: true
    },

因此，请使用以下入口点：

    entry: {
        app: './src/app.js',
        home: './src/home.js',
        product: './src/product.js'
    }

这是我的HtmlWebpackPlugin设置：

    // base template common to all pages
    new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './src/jinja-templates/base.html.j2',
        filename: `${templates}/base.html.j2`,
        chunks: ['commons', 'app']
    }),

    // JUST the homepage
    new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './src/jinja-templates/index.html.j2',
        filename: `${templates}/index.html.j2`,
        chunks: ['home']
    }),

    // JUST the product template
    new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './src/jinja-templates/product.html.j2',
        filename: `${templates}/product.html.j2`,
        chunks: ['product']
    }),

我成功地将“ commons”和“ app”块添加到所有页面，并且在主页上添加了“ home”块（仅），在产品页面上添加了“ product”块（仅）。添加。这是“主页”页面来源的示例：

    <body>
        ...
        <script type="text/javascript" src="/static/commons.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
        <script type="text/javascript" src="/static/app.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
        <script type="text/javascript" src="/static/home.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
    </body>

我不知道是否可以/如何使用此设置拆分供应商模块。我认为这是有可能的，但是如果这样的话，webpack精英们的秘密秘诀就是使这些信息受到严格保护：P

但是考虑到它已经将代码分成几个非常小的块，我不确定是否有必要（无论如何对我而言）。

webpack 4 - 分割多个条目的块插件

2 个答案: