项目需要兼容ie8，采用纯js+jquery，并且使用es5的语法

项目结构：一个构造函数（class）放一个文件，入口文件放inde.js

注意：ie8，jquery只能使用1.X的版本，最终使用1.12.4; 不用promise 等，全部用回调

为提高性能 使用webpack，将多个js文件打包成一个

 webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    'index': './src/index.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      minify: false,
    }),
    new MiniCssExtractPlugin({
      filename: "[name]_[contenthash:8].css"
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',  // 设置这个就不用import $ from './jquery.min.js'

    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      `...`,
      new CssMinimizerPlugin(),
    ],
  },
  output: {
    filename: '[name]_[contenthash:8].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, 
  },
  target: ['web','es5'],
};

 

坑：ie8  Object.defineProperty  

解决： 在HTML页面添加以下代码

<script>
  // ie8兼容
  var origDefineProperty = Object.defineProperty;
  var arePropertyDescriptorsSupported = function () {
    var obj = {};
    try {
      origDefineProperty(obj, "x", {enumerable: false, value: obj});
      for (var _ in obj) {
        return false;
      }
      return obj.x === obj;
    } catch (e) {
      /* this is IE 8. */
      return false;
    }
  };
  var supportsDescriptors = origDefineProperty && arePropertyDescriptorsSupported();
  if (!supportsDescriptors) {
    Object.defineProperty = function (a, b, c) {
      //IE8支持修改元素节点的属性
      if (origDefineProperty && a.nodeType == 1) {
        return origDefineProperty(a, b, c);
      } else {
        a[b] = c.value || (c.get && c.get());
      }
    };
  }
</script>

 

加上jquery.js文件一起打包，，ie8还是不行，sad！！！不打包还行ie8还可以打开，打包后就不行了，啊啊啊

最后方案： jquery.js，单独加载，其他打包成一个js文件

 

 

ps:或许可以把项目中的jq代码去掉，参考这个https://youmightnotneedjquery.com/