如何解决捆绑时将Babel Polyfills与主要代码分开
我正在使用Webpack和Babel。 Babel在我的输出目录中生成了一个文件main.js,其中所有polyfill都与我的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
}
解决方法
是有可能
只需使用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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。