Webpack JavaScript is not working on IE11

Question

I have a site where the javascript is not working on IE11

I'm new to webpack so this is part on my 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
    }],

  ]
}

What i'm missing? The javascript error are triggered on simple function and in popper.js

I'ma not pretty sure if use correctly the param devtool, if .babalrc is executed correctly and if the code be compatible for ie11

Any ideas?

Answer 1

您缺少babel-polyfill 。

Answer 2

The line that troubles me is:

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

I unfortunately don`t know what exactly is in your IE console, what is your error message there, but I have a hunch that you have some package in your node_modules that is written in ES6, and your webpack file ommits every node_module package and only applies babel presets to your code. I could help more if you can give me the error message from your IE console.

If you manage to find a package that gives you trouble, you can try to include that in your babal transpilation process by writing:

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

And yes, adding the missing the babel-polyfill also could help.