我如何为 IE11 构建 webpack 5

Question

我对 webpack 5 和 ie11 有疑问我尝试使用 webpack 为 ie11 构建我的代码他编译了代码，但在 ie11 中，我的 bundle.js

语法错误

错误：

1 */
2 /******/ (() => { // webpackBootstrap
3 /******/  var __webpack_modules__ = ({
4   const path = require('path');

我在第 2 行有一个错误 => (() => 它是语法错误

我的webpack.config.js

module.exports = {
    entry: __dirname+"/wwwroot/source/app.js",
    mode : "development",
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename:"bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', {
                                targets: {
                                    "ie": "11"
                                }
                            }]
                        ]
                    }
                }
            }
        ]
    },
}

和我的package.json

{
  "name": "totallydays",
  "version": "1.0.0",
  "description": "clone airbnb projet fin d'année",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "author": "benoit vaisse",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "babel-loader": "^8.2.1",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0"
  },
  "dependencies": {
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }
}

感谢大家

Answer 1

好的，我找到问题了必须加行目标：['web'，'es5'] 在我的配置 webpack

const path = require('path');

module.exports = {
    entry: __dirname + "/wwwroot/source/app.js",
    mode: "development",
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: "bundle.js"
    },
    target: ['web', 'es5'],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', {
                                targets: {
                                    "ie": "11"
                                }
                            }]
                        ]
                    }
                }
            }
        ]
    },
}

看这里：

Answer 2

将以下浏览器列表条目添加到您的 package.json

"browserslist": ["ie 11"]

并从@babel/preset-env 配置中删除目标条目。

然后 babel 和 webpack 将使用相同的配置源来输出代码。

另请参阅：

我如何为 IE11 构建 webpack 5

How i can build webpack 5 for IE11

internet-explorer

webpack