如何解决如何转换由webpack splitChunks生成的vendor.bundle.js?
我将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 举报,一经查实,本站将立刻删除。