配置完，没有报错，但是ie11无法打印，感觉时编译成低版本的js代码错了，帮忙看看

webpack.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@babel/core": "^7.17.10",
    "@babel/preset-env": "^7.17.10",
    "babel-loader": "^8.2.5",
    "core-js": "^3.22.4"
  }
}

webpack.config.js

const path = require('path');
module.exports = {
     mode:'development',
     entry: {
         main:"./hhh/index.js",
         module:"./hhh/module.js"
     },  
     output: {
      path: path.resolve(__dirname, 'dist'), 
      filename: "[name].js",   
     },
     module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_module/,
                loader:"babel-loader",
            }
        ]
    }
}

.babelrc

{
    "presets":["@babel/preset-env"]
}

编译前的两个js代码

下面这个叫index.js

import 'core-js/stable'
import {value,age} from './module.js'
if (value < age){
    console.log(1)
}else{
    console.log('err')
}
const a = Object.assign({x:0},{y:1});
console.log(a);

//下面这个叫module.js
const value = 10;
let age = 20;
export {value,age};

ie打印结果

麻烦老师帮忙看看。

曹雨sama 2022-05-04

源自：Babel 与 Webpack 4-2 loader-1

收起

1回答

好帮手慕慕子 2022-05-04 15:22:29

同学你好，因为编辑后的js文件中带有箭头函数，ie浏览器无法识别，所以会报“语法”错误。

建议修改：可以试试在webpack.config.js文件中的output下添加environment: {arrowFunction: false}，让打包生成的js代码不带有箭头函数。如下：

祝学习愉快~

收起回答

提问者曹雨sama #1

谢谢老师。有一个问题，Babel-presets-env将新代码转换成老版本，为什么还会有箭头函数，箭头函数不是es6推出的语法吗？这个解决方法，要去哪里找呀，官网上我也没有找到。

2022-05-04 15:36:42
好帮手慕慕子回复提问者曹雨sama #2

同学你好，可以参考如下解析：
1、@babel/presets-env的转换规则是基于指定的浏览器版本，如果未指定的话，会采用默认的，导致转换后的代码存在箭头函数。
2、同学代码使用的webpack版本为5.x版本的，可以查看下官网上关于v4升级到v5的一些问题及解决方案的介绍，示例：
3、可以选择在（webpack.config.js）配置文件中的output下添加environment: {arrowFunction: false}，来解决问题IE报箭头函数语法错误的问题
具体的可以查看官网介绍的webpack 在生成的运行时代码中可以使用哪个版本的 ES 特性
祝学习愉快~

2022-05-04 16:13:20