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-mapentry: {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:9011changeOrigin: 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'})] : [])],
};