如何转换由webpack splitChunks生成的vendor.bundle.js？

编程问答 2022-07-26

问题描述

我将webpack与babel结合使用，并像下面这样写webpack.config.js。

import webpack from 'webpack';
import path from 'path';
import { entries } from './frontend_config/entries';

module.exports = {
  mode: 'development',context: `${__dirname}/frontend`,entry: entries,output: {
    path: `${__dirname}`,filename: 'app/assets/javascripts/bundles/[name].bundle.js',sourceMapFilename: '[name].map',},resolve: {
    alias: {
      '~': path.resolve(__dirname,'frontend/src/'),extensions: ['.js','.jsx','.ts','.tsx'],modules: [
      path.resolve('./frontend/src'),`${__dirname}/node_modules`,],module: {
    rules: [
      {
        test: /\.tsx$|\.ts$/,use: [
          {
            loader: 'babel-loader',{
            loader: 'ts-loader',options: {
              transpileOnly: true,exclude: /node_modules/,{
        test: /\.(png|jpe?g|gif|svg)$/,use: [
          {
            loader: 'file-loader',options: {
              outputPath: 'public/assets/bundles/images',name: '[name]_[contenthash].[ext]',publicPath: '/assets/bundles/images',{
        test: /\.css$/i,use: ['style-loader','css-loader'],optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /node_modules/,name: 'vendor',chunks: 'initial',enforce: true
        }
      }
    }
  },plugins: [
    new webpack.LoaderOptionsPlugin({ options: {} }),devtool: 'inline-source-map',watch: true,cache: true,};

然后检查来源，有两个文件，index.bundle.js和vendor.bundle.js。后者是由splitChunks生成的，但是babel不会转译。它使用ES6语法，例如const和class。因此，当打开该页面时，在IE11中会因此而发生错误。顺便说一下，index.bundle.js已被移植到ES6。

因此，我想通过babel转译vendor.bundle.js。我想知道如何设置webpack或babel。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

babeljsjavascriptwebpackwebpackwebpackwebpack-4