Webpack JavaScript 不适用于 IE11答案

【问题标题】：Webpack JavaScript is not working on IE11Webpack JavaScript 不适用于 IE11
【发布时间】：2019-10-24 00:51:54
【问题描述】：

我有一个网站，其中 javascript 无法在 IE11 上运行

我是 webpack 的新手，所以这是我的 webpack.config.js

的一部分

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')
var babelenv = require('babel-preset-env');
const webpack = require('webpack');

module.exports = {
  devtool: "source-map",
  mode: 'production',
  entry: {
    main: "./assets/index.js",
    app: [
      "./node_modules/bootstrap/dist/js/bootstrap.min.js",
      "./node_modules/popper.js/dist/popper.min.js",
      "./node_modules/js-cookie/src/js.cookie.js",
      "./node_modules/jqueryrouter/dist/js/jquery.router.min.js",
      "./assets/js/app.js",
      "./node_modules/ekko-lightbox/dist/ekko-lightbox.min.js"
    ]
    catalogue: [
      "./assets/js/catalogue.js",
    ]
  },

  output: {
    path: path.resolve(__dirname, "htdocs/assets"),
    filename: "js/[name].js",
    publicPath: "/assets/"
  },


  module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [babelenv]
          }
        }
      },
      {
        test: /\.s?[c|a]ss$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ]
      }
    ]
  }
};

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      },
      "useBuiltIns": true
    }],

  ]
}

我错过了什么？ javascript错误是在简单函数和popper.js中触发的

我不确定参数 devtool 是否正确使用，.babalrc 是否正确执行以及代码是否与 ie11 兼容

有什么想法吗？

【问题讨论】：

检查你没有忘记 jquery，它应该在 bootstrap.js 之前

标签： javascript webpack internet-explorer-11 babeljs

【解决方案1】：

您缺少babel-polyfill。

【讨论】：

【解决方案2】：

困扰我的一行是：

rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [babelenv]
      }
    }
  },

不幸的是，我不知道你的 IE 控制台中到底是什么，你的错误信息是什么，但我有一种预感，你的 node_modules 中有一些用 ES6 编写的包，并且你的 webpack 文件忽略了每个 node_module包并且仅将 babel 预设应用于您的代码。如果您可以从您的 IE 控制台向我提供错误消息，我可以提供更多帮助。

如果您设法找到一个给您带来麻烦的包，您可以尝试通过以下方式将其包含在您的 babal 转译过程中：

  {
    test: /\.js$/,
    exclude: /node_modules\/(?!(your-es6-package|another-package)\/).*/,
    use: [
      { loader: 'babel-loader' }
    ]
  }

是的，添加缺少的 babel-polyfill 也会有所帮助。

【讨论】：