webpack5打包js+jquery项目

2021-12-09 16:02:33 阅读：295 来源： 互联网

标签：jquery ie8 webpack5 origDefineProperty obj js webpack

项目需要兼容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/

标签：jquery,ie8,webpack5,origDefineProperty,obj,js,webpack
来源： https://www.cnblogs.com/tingying/p/15592083.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack5打包js+jquery项目