• webpack简单配置（基于vue3配置）

    首先创建webpack.config.js他和src平级

    基础配置（具体根据项目而言）

    1. const path = require('path'); // 引入Node.js的path模块，用于处理文件路径
    2. const { VueLoaderPlugin } = require('vue-loader'); // 引入Vue Loader插件，用于处理.vue文件
    3. const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 引入MiniCssExtractPlugin插件，用于提取CSS到单独的文件
    4. const TerserPlugin = require('terser-webpack-plugin'); // 引入TerserPlugin插件，用于压缩JavaScript代码
    5. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 引入OptimizeCSSAssetsPlugin插件，用于压缩CSS代码
    6. const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入HtmlWebpackPlugin插件，用于生成HTML文件
    7. const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 引入CleanWebpackPlugin插件，用于清理构建目录
    8. const webpack = require('webpack'); // 引入webpack模块，用于访问内置插件和工具
    9.  
    10. module.exports = (env, argv) => {
    11.   // 判断当前环境是否为生产环境
    12.   const isProduction = argv.mode === 'production';
    13.  
    14.   return {
    15.     // 入口文件
    16.     entry: './src/main.js',
    17.  
    18.     // 输出文件
    19.     output: {
    20.       path: path.resolve(__dirname, 'dist'), // 输出路径
    21.       filename: isProduction ? 'js/[name].[contenthash].js' : 'js/[name].js', // 输出文件名
    22.       publicPath: '/' // 公共路径
    23.     },
    24.  
    25.     // 模块加载器配置
    26.     module: {
    27.       rules: [
    28.         {
    29.           test: /\.vue$/, // 匹配.vue结尾的文件
    30.           loader: 'vue-loader' // 使用vue-loader处理
    31.         },
    32.         {
    33.           test: /\.js$/, // 匹配.js结尾的文件
    34.           exclude: /node_modules/, // 排除node_modules目录下的文件
    35.           use: {
    36.             loader: 'babel-loader', // 使用babel-loader处理
    37.             options: {
    38.               presets: ['@babel/preset-env'] // 使用babel的env预设进行转换
    39.             }
    40.           }
    41.         },
    42.         {
    43.           test: /\.css$/, // 匹配.css结尾的文件
    44.           use: [
    45.             isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader', // 生产环境提取CSS，开发环境使用style标签插入
    46.             'css-loader', // 解析CSS文件
    47.             'postcss-loader' // 使用PostCSS进行后处理
    48.           ]
    49.         },
    50.         {
    51.           test: /\.(scss|sass)$/, // 匹配.scss或者.sass结尾的文件
    52.           use: [
    53.             isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
    54.             'css-loader',
    55.             'postcss-loader',
    56.             'sass-loader' // 使用sass-loader将Sass/SCSS转换为CSS
    57.           ]
    58.         },
    59.         {
    60.           test: /\.(png|jpe?g|gif|svg)$/, // 匹配图片文件
    61.           loader: 'url-loader', // 使用url-loader处理
    62.           options: {
    63.             limit: 8192, // 小于8KB的图片转换为base64格式
    64.             name: 'images/[name].[hash:7].[ext]' // 输出文件名格式
    65.           }
    66.         },
    67.         {
    68.           test: /\.(woff2?|eot|ttf|otf)$/, // 匹配字体文件
    69.           loader: 'file-loader', // 使用file-loader处理
    70.           options: {
    71.             name: 'fonts/[name].[hash:7].[ext]' // 输出文件名格式
    72.           }
    73.         }
    74.       ]
    75.     },
    76.  
    77.     // 解析模块请求的选项
    78.     resolve: {
    79.       extensions: ['.js', '.vue', '.json'], // 导入时可以省略的后缀名
    80.       alias: {
    81.         '@': path.resolve(__dirname, 'src/') // @符号表示src目录
    82.       }
    83.     },
    84.  
    85.     // 控制是否生成，以及如何生成 source map
    86.     devtool: isProduction ? false : 'eval-cheap-source-map', // 生产环境不生成Source Map，开发环境生成eval-cheap-source-map类型的Source Map
    87.  
    88.     // 开发服务器配置
    89.     devServer: {
    90.       contentBase: path.join(__dirname, 'dist'), // 服务器根目录
    91.       compress: true, // 是否启用gzip压缩
    92.       port: 9000, // 服务器端口号
    93.       hot: true, // 启用热模块替换(HMR)
    94.       open: true // 是否在启动时自动打开浏览器
    95.     },
    96.  
    97.     // 优化配置
    98.     optimization: {
    99.       minimizer: [
    100.         new TerserPlugin(), // 压缩JavaScript
    101.         new OptimizeCSSAssetsPlugin() // 压缩CSS
    102.       ],
    103.       splitChunks: {
    104.         cacheGroups: {
    105.           vendor: {
    106.             test: /[\\/]node_modules[\\/]/,
    107.             name: 'vendors',
    108.             chunks: 'all'
    109.           }
    110.         }
    111.       }
    112.     },
    113.  
    114.     // 插件配置
    115.     plugins: [
    116.       new VueLoaderPlugin(), // Vue Loader插件
    117.       new MiniCssExtractPlugin({ // 提取CSS到单独的文件
    118.         filename: isProduction ? 'css/[name].[contenthash].css' : 'css/[name].css',
    119.         chunkFilename: isProduction ? 'css/[id].[contenthash].css' : 'css/[id].css'
    120.       }),
    121.       new HtmlWebpackPlugin({ // 生成HTML文件
    122.         template: './public/index.html',
    123.         filename: 'index.html',
    124.         inject: true, // 所有JavaScript资源将被注入到body元素的底部
    125.         minify: {
    126.           removeComments: true, // 去除注释
    127.           collapseWhitespace: true, // 去除空格
    128.           removeAttributeQuotes: true // 去除属性引号
    129.         }
    130.       }),
    131.       new CleanWebpackPlugin(), // 清理构建目录
    132.       new webpack.DefinePlugin({ // 定义环境变量
    133.         'process.env.NODE_ENV': JSON.stringify(argv.mode)
    134.       })
    135.     ]
    136.   };
    137. };
    138.  
    139.  
    140.  
    141.  
    142.

    需要使用npm安装的指令

    Vue 相关依赖

    vue@next：Vue 3的最新版本，提供了Composition API、