1. 程式人生 > 其它 >webpack5打包js+jquery專案

webpack5打包js+jquery專案

專案需要相容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'], };

坑:ie8Object.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/