将捆绑包拆分为基础和扩展名

我的应用程序的大部分仅需要lodash作为外部依赖项。假设只有一个文件base.js：

import * as _ from 'lodash';

console.log(_.toUpper('Hello world!'));

然而，应用程序的一部分也需要moment。让我们再次考虑单个文件extension.js：

import * as _ from 'lodash';
import * as moment from 'moment';

console.log(_.toUpper(moment().format()));

现在，我想将其捆绑在一起以获取两个个不同的文件

base.bundle.js包含base.js和lodash
extension.bundle.js包含extension.js和moment

在大多数页面上，我只会包含base.bundle.js，并且期望只看到一行控制台输出。不过，在某些页面上，我将包括两个捆绑软件，并希望看到控制台输出的两行。

这可能吗？如何实现这种设置？

到目前为止我尝试过的事情

简单地定义两个不同的入口点会将lodash添加到两个包中。

entry: {
    base: './src/base.js',
    extension: './src/extension.js'
}

通过简单的splitChunks优化定义两个不同的入口点将生成四个.bundle.js文件，而不是两个：

entry: {
    base: './src/base.js',
    extension: './src/extension.js'
},
optimization: {
    splitChunks: {
        chunks: 'all'
    }
}

通过相同的入口点添加两个文件并为扩展束定义一个显式的chunkGroup，将生成两个.bundle.js文件，每个文件内部都有正确的块。但是，采用这种方法不可能使用base.bundle.js独立的（完全没有控制台输出）。

entry: {
    base: ['./src/base.js', './src/extension.js']
},
optimization: {
    splitChunks: {
        cacheGroups: {
            default: false,
            commons: {
                chunks: 'all',
                name: 'extension',
                test: /extension\.js|moment/
            }
        }
    }
},

使用Webpack 4进行静态代码拆分

将捆绑包拆分为基础和扩展名

到目前为止我尝试过的事情

0 个答案: