webpack5打包js+jquery專案
阿新 • • 發佈:2021-12-09
專案需要相容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/