Webpack

Question

在我的 webpack 配置中，我创建了 2 个缓存组，"vendors" 和 "common"。

        entry: {
            'entry1': './src/entry1.js',
            'entry2_independent': './src/entry2_independent.js',
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendors: {
                        minChunks: 30,
                        test: /[\/]node_modules[\/]/,
                        name: 'vendors',
                        priority: -10,
                        chunks: 'initial'
                    },
                    default: {
                        minChunks: 30,
                        priority: -20,
                        chunks: 'initial',
                        reuseExistingChunk: true,
                        name: 'common'
                    }
                }
            }
        },

我希望我的入口点之一是独立的。它应该包括它的所有依赖项而不依赖于 common.js 或 vendors.js.

更具体地说，我希望所有名称中带有“_independent”的入口点都是独立的。

我还是想保留优化逻辑。如果一个模块在 30 个块中使用，我仍然希望它成为 'common' 层的一部分。

我该怎么做？

谢谢！

Answer 1

Return 对于您希望位于该特定缓存组中的所有文件，在名称函数中为真

函数名称将运行在其路径匹配 all_files_that_match_this_regex_will_run_name_func 的所有文件上。

如果该函数 return 为真，则此文件将嵌入 common 块中。

 common: {
   test: /<all_files_that_match_this_regex_will_run_name_func>/,
   name(fileName) {
      const filePath = fileName.context;
      const regexForFilesInCommonChunks = /isShouldBeInCommon/

      if (regexForFilesInCommonChunks.test(filePath)) {
          return 'common'
      }

      return false;
   }
}

Answer 2

我最终导出了 2 个配置。一个具有公共层 (common/vendors)，另一个创建 independent/standalone 束：

module.exports = function (env) {

    const baseConfig = {
        mode: env.development ? 'development' : 'production',
        devtool: 'source-map',
        watch: !!env.development,
        output: {
            path: path.resolve(__dirname, CONSTS.DIST),
            filename: '[name].js',
            chunkFilename: '[name].js',
            publicPath: '/dist/scripts/',
            globalObject: 'this',
        }
    };

    const clientConfig = Object.assign({}, baseConfig, {
        entry: {
            'client-entry1': './src/entry1.js',
            'client-entry2': './src/entry2.js',
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendors: {
                        minChunks: 30,
                        test: /[\/]node_modules[\/]/,
                        name: 'vendors',
                        priority: -10,
                        chunks: 'initial'
                    },
                    default: {
                        minChunks: 30,
                        priority: -20,
                        chunks: 'initial',
                        reuseExistingChunk: true,
                        name: 'common'
                    }
                }
            }
        }
    });

    const serverConfig = Object.assign({}, baseConfig, {
        entry: {
            'independent-bundle1': './src/entry1_independent.js',
            'independent-bundle2': './src/entry2_independent.js',
        }
    });

    return [clientConfig, serverConfig];
};

如果有人有不需要两种不同配置的更好解决方案，请分享:)

Answer 3

I want one of my entry points to be independent. [...]

请注意，默认情况下所有入口点都是 mutual-independent。天真的用户可能犯的最常见错误是 module-duplication 条目。相反，您可以对一个条目使用 dependOn 以重用另一个条目中的所有模块。我认为这是不同于你的另一种方法，在我看来这也是一个很好的做法：no-use 表示 not-related.

Webpack - 如何创建独立的入口点（忽略 cacheGroups 设置）？

Webpack - How to create independent entry point (ignore cacheGroups settings)?

webpack-4

bundling-and-minification