为网站和小部件拆分的Webpack块(基于入口点)

o4hqfura  于 2022-11-13  发布在  Webpack
关注(0)|答案(1)|浏览(177)

我有两个Webpack入口点:索引和小部件。
索引入口点为我们的主页生成必要的入口。小部件入口点生成一个没有页脚和页眉的精简版本,因此它可以通过一个iFrame集成。但是除了html集成,我还想提供一个window.myLibrary.render函数。为了集成这个,我需要一个固定的js包。
因此,index项应该如下所示:indexx 1月2日x 1月3日x
条目widget应在widget.bundle.js中集成通用块和供应商块,或从widget.bundle.js加载通用块和供应商块
这是否可行?
我当前的配置如下所示,但它只是将common和vendor捆绑到入口点捆绑包中。

optimization: {
      splitChunks: {
        chunks: 'all',
        minChunks: 2,
        minSize: 20000,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
        enforceSizeThreshold: 50000,
        cacheGroups: {
          default: false,
          common: false,
          // We want all vendor (node_modules) to go into a chunk.
          vendors: {
            test(module, chunks) {
              // The (production) vendors bundle only includes modules that are
              // referenced from the main chunk.
              // Modules under node_modules that are referenced from the test bundle should not
              // be included (they are bundled into the test bundle).
              const isInChunk = chunkName =>
                chunks.some(chunk => chunk.name === chunkName);
              console.log(chunks.map(chunk => chunk.name));
              return (
                /[\\/]node_modules[\\/]/.test(module.resource) &&
                !isInChunk('widget')
              );
            },
            name: 'vendors',
            // 'all' is confusing - it basically means test all modules regardless if they
            // are statically (via require(x)/import 'x'; ie 'initial' option)
            // or dynamically (via import('x'); ie 'async' option)
            // loaded.
            chunks: 'all',
            reuseExistingChunk: true
          }
        }
      }
    }
qoefvg9y

qoefvg9y1#

我在Auto-load a chunk in entry point中找到了答案。
您必须在小部件入口点上定义chunks: ['widget'],然后定义优化配置,如下所示:

config.optimization.splitChunks({
      cacheGroups: {
        defaultVendors: {
          name: `chunk-vendors`,
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: chunk => chunk.name !== 'widget'
        },
        common: {
          name: `chunk-common`,
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    });

相关问题