web3.0 升级到webpack5.0 以及兼容IE处理

web前端执行者

已于 2023-07-13 15:14:54 修改

阅读量2.7k

点赞数 3

文章标签： webpack webpack5.0 IE兼容处理

于 2023-07-06 16:25:49 首次发布

本文链接：https://blog.csdn.net/zhxh0376/article/details/131548053

版权

文章详细介绍了如何将一个基于webpack3的项目升级到webpack5，包括卸载旧版本、安装新版本、升级相关插件以及处理IE兼容性问题。主要的IE兼容策略包括使用core-js、调整babel配置以及处理静态文件的加载。此外，还提供了webpack配置文件的示例，强调了对IE的支持和优化。

摘要由CSDN通过智能技术生成

如果你的事vue-cli 或者其他cli 关于IE 兼容不具有什么参考价值。如果是react 项目，你看看就行。

webpack3的打包速度已成为诟病，所以我们将原来的webpack3升级至webpack5

首先就是原来的项目结构，主要在于build目录下面，存在基础配置，开发配置，生产配置
build
|-------util.js
|-------webpack.common.js
|-------webpack.dev.js
|-------webpack.prod.conf.js

升级webpack和相应插件

首先，卸载原有的webpack

安装webpack 5.0

npm install webpack webpack-dev-server webpack-cli

安装完成以后

升级其他插件版本安装npm-check-updates

npm install -g npm-check-updates

安装完成以后执行npm-check-updates，

修改 package.json 文件到相应的版本。

执行 npm cache clean -f ，删除node-modules 执行npm install，

此时会报各种版本不匹配，一定要降级，除了webpack 版本维持不动以外，其他版本尽量往下降

以上升级完成以后。除了IE 以外都可以正常运行了。

IE兼容处理

webpack 5.0 以后，IE 兼容参考babel-preset 官方文档。IE 的兼容一言难进，特别是webpack3，升级到webpack5.0以后，webpack3的兼容写法全部报废。

个人意见如下：

1. 使用core-js 如果你的代码有用到Map Set symbol 等新特性建议使用core-js3.0 如果没有用到core-js2.0

2. webpack3.0 一系列babel- 的插件，除 babel-loader 以外。其他都要替换成@babel-开头的（版本不是越新越好core-js2 和core-js3 npm 版本库看发布日期，下载时候下年限差不多的就行。）

3. webapck 打包输出，output:[core-js,main.js] 网上还有其他方案，个人兼容如果是core-js2.0.0 使用这个，如果是安装的是core-js3.0。可以尝试网上其他答案。

4. 插件注意 @babel/plugin-transform-runtime 是做promise 兼容处理的，内部core-js配置和上一步core-js 版本没有任何关系。下载完成之后看node_modules 这个插件使用的是core-js 第几个版本就在.babelrc 配置第几个。

5.IE兼容如果出错了，在IE 预览时，一般都会明确的指向node_modules 那个包，或者是你内部代码哪里写的又问题，一定要记住千万不要去改相关代码， babel-preset 官网找到相应插件解析，如果node_modules 中的包又问题，就降版本，降版本，降版本。

6. 第三方引入的静态文件，这一类的如果是，index.html 之间标签引入两个建议1.要么放到cdn 独立的加速服务器，要么统一放到本地的一个文件夹（static）这个文件夹千万不要使用babel-loader 再次解析，IE 会出现很多莫名的错误（这一点坑了我很久）

IE 浏览器兼容就是以上所述，如果其他大佬有补充请留言

配置源码说明

代码文件有部分注释，可以关注一下也许对你有一定的帮助

webpack.dll.config.js

文件如下 ----dll 打包具体怎么操作可以参考webpack 官网，不过现在都是各种cli 单独使用webpack 已经很少了

const path = require('path');
const webpack = require('webpack');
const presetEnv=require("@babel/preset-env")
module.exports = {
  mode: "production",
  target: ['web', 'es5', "browserslist"], // 要加这个，这是webpack5.0 的新特性。
  entry: {
    vendor: [  // 这里是dll 公共打包的。看自己需求，可以放更多。
      'vue',    
      'vue-router',
      'vuex',
      'vue-i18n',
      'axios',
      'vuex-persistedstate'
    ]
  },
  output: {
    path: path.join(__dirname, '../static/js/dll'),
    filename: '[name].dll.js',
    library: '[name]_library',      // vendor.dll.js中暴露出的全局变量名
    clean:true,
    environment: {
      arrowFunction: false
    }
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library',
      context: path.resolve(__dirname, '..')
    })
  ],
  module:{
    rules:[{
      test:/\.js$/,
      use:{
        loader:'babel-loader',
        options:{
          presets:[presetEnv],
        }
      }
    }]
  }
};

webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map', // IE 会自动解析Map 对于兼容调试很有帮助。
  devServer: {
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ["style-loader","css-loader"],
      },
      {
        test: /.less$/,
        use: ["style-loader",'css-loader', 'less-loader'],
      },
    ],
  },
});

webpack.common.js 打包基础核心

const path = require("path");
const { DefinePlugin, DllReferencePlugin } = require('webpack') //dll 打包必须如果不是可以去掉
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 模版主体 没有太大的变化。
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // webpack5.0 vue-loader 的配置方式改变了 主意pagejson版本 
const utils = require('./utils') 
const WebpackBar = require('webpackbar'); // 打包进度条。默认的很不错，更多 可以参考npm库。
module.exports = {
  target: ['web', 'es5', "browserslist"],
  entry: {
    app: ['core-js',"./src/main.js"], // 兼容IE 必须， 如果IE 不需要可以将core-js 删除
  },
  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "../dist"),
    chunkFilename: "[name].[contenthash].js",
    clean: true,
    publicPath: utils.commonCofig.assetsPublicPath,
    pathinfo: utils.commonCofig.pathinfo,
    enabledWasmLoadingTypes: ['fetch'],
    environment: {
      templateLiteral: false, // 默认是true
      optionalChaining: false, // 默认是true
      module: true, // 默认是false
      forOf: false, // 默认是true
      dynamicImport: false, // 默认是false,
      // dynamicImportInWorker:false, // 默认是false,
      destructuring: false,// 默认是true
      const: false,// 默认是true
      bigIntLiteral: false,// 默认是false
      arrowFunction: false // 默认是true
    }
  },
  resolve: {
    extensions: [".*", '.js', '.vue', ".json"],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, "../src"),
      '@static': path.resolve(__dirname, "../static"),
      '@common': path.resolve(__dirname, "../src/common"),
      '@components': path.resolve(__dirname, "../src/components"),
      '@pages': path.resolve(__dirname, "../src/pages"),
      '@assets': path.resolve(__dirname, "../src/assets"),
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Production",
      template: './public/index.html',
      hash: true,
      inject: true
    }),
    new DefinePlugin({
      process: {
        env: JSON.stringify({ ...utils.commonCofig.env })
      },
      '_basepath_': JSON.stringify(utils.commonCofig.assetsPublicPath)
    }),
    new VueLoaderPlugin(),
    new DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('./vendor-manifest.json')
    }),
    new WebpackBar(),
  ],


  optimization: {
    moduleIds: "deterministic",
    runtimeChunk: "single",
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendeor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendeors",
          chunks: "all",
        }
      }
    }
  },


  module: {
    rules: [
      {
        test: /\.vue$/,
        include: path.resolve(__dirname, "../src"),
        use: [
          "vue-loader",
        ]
      },
      {
        test: /\.(js|vue)$/,
        include: path.resolve(__dirname, "../src"),
        // exclude: /(node_modules|static)/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: 40,
            }
          }]
      },
      {
        test: /\.(js)$/,
        include: path.resolve(__dirname, "../src"),
        exclude: /(static|node_modules)/,      // iE兼容 一定加上static 第三方插件压缩js引用。
        use: {
          loader: "babel-loader",
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        type: "asset/resource",
        generator: {
          filename: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        type: "asset/resource",
        generator: {
          filename: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }, {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: "pre",
        include: [path.resolve(__dirname, "../src")],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      }
    ]
  }
};

webpack.prod.js

const { merge } = require("webpack-merge");
const path = require('path')
const common = require("./webpack.common.js");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')
const config = require('../config')
const utils = require('./utils')
const WebpackBar = require('webpackbar')


module.exports = merge(common, {
  mode: "production",
  // devtool: "source-map",
  module: {
    rules: [
      {
        test: /.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
      },
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin()
    ]
  },
  devtool: config.build.productionSourceMap || 'source-map',
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename:  utils.assetsPath('css/[name].[chunkhash].css'),
      chunkFilename: utils.assetsPath('css/[id].[chunkhash].css')
    }),
    new CopyWebpackPlugin({ // 静态资源拷贝一定要有。
      patterns: [{
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
      }]
    }),
    new WebpackBar(),
  ],
  optimization: { // 样式分包，每一个组件的私有样式都会打一个单独的样式包。好坏不做评价
    splitChunks: {
      cacheGroups: {
        fooStyles: {
          type: 'css/min-extract',
          name: "styles_foo",
          chunks: (chunk) => {
            return chunk.name === "foo"
          },
          enforce: true,
        },
        barStyles: {
          type: 'css/min-extract',
          name: "styles_bar",
          chunks: (chunk) => {
            return chunk.name === 'bar';
          },
          enforce: true,
        }


      }
    }
  }
});

util.js 配置 // 核心是为了区分环境，如果想自定义变量参考文档

Environment 选项-webpack5.0 APi

环境变量---webpack5.0指南

内置环境变量--node缓存设置。这个个人感觉比较有用，所有记录一下。

const path = require('path')
const config = require('../config')
// 未使用webpack 注入变量， webpack5.0 有很多新特性的变量，参考官网
// npm_lifecycle_event  是取 npm run [name] 的name 字符。
const isProduction = process.env.npm_lifecycle_event !== 'dev' 
exports.assetsPath = function (_path) {
  const assetsSubDirectory = isProduction
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
  return path.posix.join(assetsSubDirectory, _path)
}
exports.commonCofig = isProduction? config.build : config.dev

config/index.js 问配置

const path=require('path')

module.exports={
 build:{
   index:path.resolve(__dirname,'../dist/index.html'),
   assetsRoot:path.resolve(__dirname,'../dist'),
   assetsSubDirectory:'./static',
   assetsPublicPath:'/prefixName/', //这个是线上服务器配置的，域名/prefixName/页面路由
   productionSourceMap:false,
 },
 dev:{
  port:8080,
  autoOpenBrowser:true,
 assetsSubDirectory:'static',
 assetsPublicPath:'/',
 proxytable:{ //本地调试接口代理配置。每个项目都不一样，没有参考价值我就不放了
 }，
 cssSourceMap:true
 }
}

.babelrc-----babel-lodaer 的配置，主要是IE 兼容处理，如果没有这个，IE会是空白页面（报js错误。）

{
    "presets": [
      [
        "@babel/preset-env"
      ]
    ],
    "plugins": [
      [
        "@babel/plugin-transform-runtime",
        {
          "corejs": 3
        }
      ],
      "@babel/plugin-transform-property-mutators",
      "@babel/plugin-transform-arrow-functions",
      "@babel/plugin-transform-parameters"
    ]
  }

package.json 文件如下，

npm install之后，一定要执行npx browserslist 查看一下支持的浏览器列表。如何配置请查看browserslist git

{
  "name": "webpack5",
  "version": "1.0.0",
  "sideEffects": true,
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "node ./build/server.js",  //模拟线上环境
    "dev": "webpack serve --open --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js",
    "watch": "webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.18.10",
    "@babel/core": "^7.22.5",
    "@babel/plugin-transform-arrow-functions": "^7.18.6",
    "@babel/plugin-transform-parameters": "^7.22.5",
    "@babel/plugin-transform-property-mutators": "^7.16.7",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.20.2",
    "@babel/runtime-corejs3": "^7.22.5",
    "@types/js-cookie": "^3.0.2",
    "axios": "^1.2.2",
    "babel-loader": "^9.1.0",
    "copy-webpack-plugin": "^11.0.0",
    "core-js": "^2.6.12",
    "crypto-js": "^3.3.0",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^4.0.0",
    "eslint": "^7.32.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-vue": "^9.8.0",
    "eslint-webpack-plugin": "^3.2.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.18.2",
    "html-webpack-plugin": "^5.5.0",
    "js-cookie": "^2.2.1",
    "less": "^4.1.3",
    "less-loader": "^10.2.0",
    "md5": "^2.3.0",
    "mini-css-extract-plugin": "^2.6.1",
    "normalize.css": "^8.0.1",
    "style-loader": "^3.3.1",
    "thread-loader": "^3.0.4",
    "vue": "^2.7.14",
    "vue-loader": "^15.10.0",
    "vue-loader-plugin": "^1.3.0",
    "vue-router": "^2.7.0",
    "vue-template-compiler": "^2.7.14",
    "vuex": "^2.5.0",
    "vuex-persistedstate": "^1.3.0",
    "webpack": "^5.88.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-middleware": "^5.3.3",
    "webpack-dev-server": "^3.11.3",
    "webpack-hot-middleware": "^2.25.1",
    "webpackbar": "^5.0.2"
  },
  "browserslist": "> 0.1%,not dead,last 3 version",
  "dependencies": {
    "vue-loader": "^15.10.0"
  }
}

附件build/server.js // 主要是模拟生产环境在本地运行。

const  express=require('express')
const webpack=require('webpack')
const webpackDevmiddleWare=('webpack-dev-middleware')
const app=express()
const config=require('./webpack.prod')
const compiler=webpack(config)

app.user(webpackDevmiddleWare(compiler,{
    publicPath:config.output.publicPath
}))

app.listen(3000,function(){
 console.log("Exaplae app listening on port 3000!\n")

})