Webpack - 如何创建独立的入口点(忽略 cacheGroups 设置)?
Webpack - How to create independent entry point (ignore cacheGroups settings)?
在我的 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' 层的一部分。
我该怎么做?
谢谢!
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;
}
}
我最终导出了 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];
};
如果有人有不需要两种不同配置的更好解决方案,请分享:)
I want one of my entry points to be independent. [...]
请注意,默认情况下所有入口点都是 mutual-independent。天真的用户可能犯的最常见错误是 module-duplication 条目。相反,您可以对一个条目使用 dependOn
以重用另一个条目中的所有模块。我认为这是不同于你的另一种方法,在我看来这也是一个很好的做法:no-use 表示 not-related.
在我的 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' 层的一部分。
我该怎么做?
谢谢!
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;
}
}
我最终导出了 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];
};
如果有人有不需要两种不同配置的更好解决方案,请分享:)
I want one of my entry points to be independent. [...]
请注意,默认情况下所有入口点都是 mutual-independent。天真的用户可能犯的最常见错误是 module-duplication 条目。相反,您可以对一个条目使用 dependOn
以重用另一个条目中的所有模块。我认为这是不同于你的另一种方法,在我看来这也是一个很好的做法:no-use 表示 not-related.