webpack5所用依赖以及对应的版本

所有依赖以及版本 

{
  "name": "market-web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --config ./vue.config.js",
    "build": "cross-env NODE_ENV=production webpack --config ./vue.config.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@babel/core": "^7.26.10",
    "@babel/plugin-transform-runtime": "^7.26.10",
    "@babel/preset-env": "^7.26.9",
    "@babel/runtime-corejs3": "^7.27.0",
    "animate.css": "^4.1.1",
    "axios": "^1.9.0",
    "babel-loader": "^10.0.0",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.41.0",
    "css-loader": "^7.1.2",
    "dotenv-webpack": "^8.1.0",
    "element-ui": "^2.15.3",
    "html-webpack-plugin": "^5.6.3",
    "mini-css-extract-plugin": "^2.9.2",
    "nprogress": "^0.2.0",
    "postcss-loader": "^8.1.1",
    "postcss-pxtorem": "^5.1.1",
    "sass": "^1.83.4",
    "sass-loader": "^10.2.0",
    "unplugin-auto-import": "^0.16.0",
    "unplugin-vue-components": "^0.22.0",
    "vue": "^2.6.14",
    "vue-loader": "^15.11.1",
    "vue-router": "^3.6.5",
    "vue-seamless-scroll": "^1.1.23",
    "vue-style-loader": "^4.1.3",
    "vuex": "^3.6.2",
    "webpack": "5.72.1",
    "webpack-cli": "5.0.0",
    "webpack-dev-server": "4.9.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "autoprefixer": "^9.8.8",
    "babel-plugin-component": "^1.1.1",
    "cross-env": "^7.0.3",
    "css-minimizer-webpack-plugin": "^7.0.2",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "imagemin": "^9.0.1",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-jpegtran": "^8.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^11.0.1",
    "postcss": "^7.0.39",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
    "thread-loader": "^4.0.4",
    "vue-template-compiler": "^2.7.16"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  }
}

.browserslistrc

last 2 version 
> 1% 
iOS 7
last 3 iOS version

.postcss.config.js

modules.exports = {
    plugins: [
        require('autoprefixer')    
    ]
}

babel.config.js

module.exports = {
    presets: [
        ['@vue/cli-plugin-babel/preset']
    ],
    "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
    },
  },
};

vue.config.js

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementUiResolver } = require('unplugin-vue-components/resolvers');
const os = require("os");
const { DefinePlugin } = require("webpack")
const Dotenv = require("dotenv-webpack")
// cpu核数
const threads = os.cpus().length;
const TerserPlugin = require("terser-webpack-plugin")

const env = process.env.NODE_ENV || "development"
// 在生产环境中替换 vue-style-loader
const styleLoaders = (isProduction) => {
  const loaders = [
    isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
    'css-loader',
    'postcss-loader'
  ];

  return {
    test: /\.css$/,
    use: loaders
  };
};

// 生产环境 SCSS 配置
const scssLoaders = (isProduction) => {
  const loaders = [
    isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
    'css-loader',
    'postcss-loader',
    'sass-loader'
  ];

  return {
    test: /\.scss$/,
    use: loaders
  };
};

const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
  mode: 'development',
  devtool: 'cheap-module-source-map', //source-map
  entry: {
    main: './src/main.js',
  },
  output: {
    filename: '[name]-[contenthash:6].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      vue: "vue/dist/vue.esm.js",
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          },
          options: {
            // 开启缓存
            cacheDirectory: path.resolve(
              __dirname,
              "node_modules/.cache/vue-loader"
            ),
          }
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除 node_modules 目录
        use: [
          {
            loader: "thread-loader", // 开启多进程
            options: {
              workers: threads, // 数量
            },
          },
          {
            loader: "babel-loader",
            options: {
              cacheDirectory: false, // 开启babel编译缓存
              cacheCompression: false, // 缓存文件不要压缩
              targets: {
                "browsers": [">0.1%"]
              },
              presets: [
                ["@babel/preset-env", {
                  useBuiltIns: "usage",
                  corejs: 3
                }]
              ],
              plugins: [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    corejs: false,
                    helpers: true,
                    regenerator: true
                  }
                ]
              ]
            }
          }
        ]
      },
      styleLoaders(isProduction),
      scssLoaders(isProduction),
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        type: 'asset/resource',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          filename: 'img/[name].[hash:8][ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash:8][ext]'
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'media/[name].[hash:8][ext]'
        }
      }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [
      // css压缩也可以写到optimization.minimizer里面，效果一样的
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
      new TerserPlugin({
        parallel: threads // 开启多进程
      })
    ],
  },
  devServer: {
    host: 'localhost',
    port: 9000,
    open: true,
    hot: true,
    proxy: {
      "/mapi": {
        target: 'http://10.100.2.99', //http://10.100.2.94:9011
        changeOrigin: true,
        logLevel: "debug",
        // pathRewrite: {
        //   "^/mapi": ''
        // },
        onProxyRes(proxyRes, req, res) {
          const realUrl = "http://10.100.2.99" + req.url|| ''; // 真实请求网址
          proxyRes.headers['A-Real-Url'] = realUrl; // 添加响应标头(A-Real-Url为自定义命名)，在浏览器中显示
        }
      }
    },
  },
  plugins: [
    new VueLoaderPlugin(),
    new DefinePlugin({}),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
      filename: "index.html",
      templateParameters: {
        BASE_URL: `/`
      },
      title: '奇迹点'
    }),
    new Dotenv({
      path: `./.env.${env}`
    }),
    AutoImport({
      imports: ['vue', 'vue-router'],
      resolvers: [ElementUiResolver()],
    }),
    Components({
      resolvers: [ElementUiResolver()],
    }),
    ...(isProduction ? [new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].chunk.css'
    })] : [])
  ],
};