捆绑时将Babel Polyfills与主代码分开
捆绑时将Babel Polyfills与主代码分开
提问于 2020-10-09 02:55:18
我用的是Webpack和巴别塔。Babel在我的输出目录中生成了一个单独的文件main.js，其中所有的多边形填充都与我的js文件一起添加。我想将主代码中的polyfills分成两个不同的文件。polyfills.js和main.js。
这个是可能的吗？
我现在的webpack配置如下：
module.exports = {
entry: ['@babel/polyfill' ,'./src/index.js'],
output: {
path: path.resolve('./dist'),
filename: 'main.js',
},
mode: 'development',
devtool: 'source-map',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
optimization: {
minimize: true,
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: [/node_modules/],
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
}
}
}
]
}
};我的BabelRC看起来像这样：
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "entry",
"debug":false,
"corejs": "3.6.5",
"targets": {
"chrome": "38"
}
}]
],
"compact": true
}回答 1
Stack Overflow用户
发布于 2020-10-09 05:10:30
是的，这是可能的
只需像这样使用SplitChunksPlugin
module.exports = {
entry: ["@babel/polyfill",'./src/index.js'],
output: {
path: path.resolve('./dist'),
},
mode: 'development',
devtool: 'source-map',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
optimization: {
minimize: true,
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/](@babel[\\/]polyfill)[\\/]/,
name: 'vendor',
chunks: 'all',
enforce: true
},
},
}
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: [/node_modules/],
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
}
}
}
]
},
};更多信息请点击此处https://v4.webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks
如果想要分析和可视化构建的内容，可以使用BundleAnalyzerPlugin
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64268973
复制相关文章
相似问题
腾讯云开发者
