在qiankun微前端开发中使用vue2的时候各种以及loder插件以及兼容的版本。

package.json

{
  "name": "qiankun-main",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "webpack-dev-server --config ./webpack.config.js"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "element-ui": "^2.15.14",
    "qiankun": "^2.10.16",
    "vue": "^2.6.14",
    "vue-router": "^3.6.5"
  },
  "devDependencies": {
    "@babel/core": "^7.26.10",
    "@babel/eslint-parser": "^7.12.16",
    "@babel/preset-env": "^7.26.9",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-loader": "^10.0.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^7.1.2",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.6.3",
    "postcss": "^8.5.3",
    "postcss-loader": "^8.1.1",
    "style-loader": "^4.0.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.11.1",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.98.0",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.0"

  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

webpack.config.js

const path = require("path")
// webpack.config.js
//安装html插件  npm install html-webpack-plugin clean-webpack-plugin --save-dev
//安装devserver插件  npm install webpack-dev-server ---save-dev  

const HtmlWebpackPlugin = require('html-webpack-plugin') //通过 npm 安装
// 清除之前打包的文件
var { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')  //新版版本的结构
//
const webpack = require('webpack')
module.exports = {
   // mode:"production", //指定是生产环境
    mode:"development", //指定是开发环境
    entry:'./src/main.js',
    devtool: 'inline-source-map', //可以看到代码报错的地方啊
    devServer: {
        
        static: path.join(__dirname, 'dist'), // 指定发布后的映射的路径，./代表映射当前路劲
      //  static: "./dist", // 指定发布后的映射的路径，./代表映射当前路劲
        host: 'localhost', // 修正 host 配置
        compress: true, // 压缩资源
        port: 9000, // 指定服务器的端口号
        open: true, // 指定以哪个浏览器打开，open:true 代表以默认浏览器打开
    },
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,"dist") //打包指定到dist目录下面
    },
    module: {
        rules: [
          // ... 其它规则
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          },
          {
            test: /\.css$/i,
            use: ['style-loader', 
                'css-loader', 
                'postcss-loader'//自定添加css 厂商前缀
            ],  //
          },
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
              },
            },
          },
          {
            test: /\.(png|jpg|gif|svg)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                    name:'[name].[ext]',
                    limit:2048,
                },
              },
            ],
          },
        ]
      },
      plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({template: './public/index.html'}),
        // 需要使用插件清除的文件名,当执行webpack命令时会先将指定目录下的文件删除
        new CleanWebpackPlugin(),
       // new webpack.HotModuleReplacementPlugin()
      ],
      resolve:{
       extensions: [".css" , ".js" , '.vue', '.json'],
            alias: {
            '@': path.resolve(__dirname, './src')
            }
            
        
      }
}