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

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

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

const path = require('path'); // 引入Node.js的path模块，用于处理文件路径
const { VueLoaderPlugin } = require('vue-loader'); // 引入Vue Loader插件，用于处理.vue文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 引入MiniCssExtractPlugin插件，用于提取CSS到单独的文件
const TerserPlugin = require('terser-webpack-plugin'); // 引入TerserPlugin插件，用于压缩JavaScript代码
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 引入OptimizeCSSAssetsPlugin插件，用于压缩CSS代码
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入HtmlWebpackPlugin插件，用于生成HTML文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 引入CleanWebpackPlugin插件，用于清理构建目录
const webpack = require('webpack'); // 引入webpack模块，用于访问内置插件和工具

module.exports = (env, argv) => {
  // 判断当前环境是否为生产环境
  const isProduction = argv.mode === 'production';

  return {
    // 入口文件
    entry: './src/main.js',

    // 输出文件
    output: {
      path: path.resolve(__dirname, 'dist'), // 输出路径
      filename: isProduction ? 'js/[name].[contenthash].js' : 'js/[name].js', // 输出文件名
      publicPath: '/' // 公共路径
    },

    // 模块加载器配置
    module: {
      rules: [
        {
          test: /\.vue$/, // 匹配.vue结尾的文件
          loader: 'vue-loader' // 使用vue-loader处理
        },
        {
          test: /\.js$/, // 匹配.js结尾的文件
          exclude: /node_modules/, // 排除node_modules目录下的文件
          use: {
            loader: 'babel-loader', // 使用babel-loader处理
            options: {
              presets: ['@babel/preset-env'] // 使用babel的env预设进行转换
            }
          }
        },
        {
          test: /\.css$/, // 匹配.css结尾的文件
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader', // 生产环境提取CSS，开发环境使用style标签插入
            'css-loader', // 解析CSS文件
            'postcss-loader' // 使用PostCSS进行后处理
          ]
        },
        {
          test: /\.(scss|sass)$/, // 匹配.scss或者.sass结尾的文件
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
            'css-loader',
            'postcss-loader',
            'sass-loader' // 使用sass-loader将Sass/SCSS转换为CSS
          ]
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/, // 匹配图片文件
          loader: 'url-loader', // 使用url-loader处理
          options: {
            limit: 8192, // 小于8KB的图片转换为base64格式
            name: 'images/[name].[hash:7].[ext]' // 输出文件名格式
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf)$/, // 匹配字体文件
          loader: 'file-loader', // 使用file-loader处理
          options: {
            name: 'fonts/[name].[hash:7].[ext]' // 输出文件名格式
          }
        }
      ]
    },

    // 解析模块请求的选项
    resolve: {
      extensions: ['.js', '.vue', '.json'], // 导入时可以省略的后缀名
      alias: {
        '@': path.resolve(__dirname, 'src/') // @符号表示src目录
      }
    },

    // 控制是否生成，以及如何生成 source map
    devtool: isProduction ? false : 'eval-cheap-source-map', // 生产环境不生成Source Map，开发环境生成eval-cheap-source-map类型的Source Map

    // 开发服务器配置
    devServer: {
      contentBase: path.join(__dirname, 'dist'), // 服务器根目录
      compress: true, // 是否启用gzip压缩
      port: 9000, // 服务器端口号
      hot: true, // 启用热模块替换(HMR)
      open: true // 是否在启动时自动打开浏览器
    },

    // 优化配置
    optimization: {
      minimizer: [
        new TerserPlugin(), // 压缩JavaScript
        new OptimizeCSSAssetsPlugin() // 压缩CSS
      ],
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    },

    // 插件配置
    plugins: [
      new VueLoaderPlugin(), // Vue Loader插件
      new MiniCssExtractPlugin({ // 提取CSS到单独的文件
        filename: isProduction ? 'css/[name].[contenthash].css' : 'css/[name].css',
        chunkFilename: isProduction ? 'css/[id].[contenthash].css' : 'css/[id].css'
      }),
      new HtmlWebpackPlugin({ // 生成HTML文件
        template: './public/index.html',
        filename: 'index.html',
        inject: true, // 所有JavaScript资源将被注入到body元素的底部
        minify: {
          removeComments: true, // 去除注释
          collapseWhitespace: true, // 去除空格
          removeAttributeQuotes: true // 去除属性引号
        }
      }),
      new CleanWebpackPlugin(), // 清理构建目录
      new webpack.DefinePlugin({ // 定义环境变量
        'process.env.NODE_ENV': JSON.stringify(argv.mode)
      })
    ]
  };
};

需要使用npm安装的指令

Vue 相关依赖

vue@next：Vue 3的最新版本，提供了Composition API、<script setup>等新特性。

npm install vue@next

Webpack 相关依赖

webpack：一个静态模块打包器，用于编译JavaScript模块。

npm install webpack --save-dev

webpack-cli：Webpack的命令行接口，用于运行Webpack命令。

npm install webpack-cli --save-dev

Vue Loader 和编译器

vue-loader@next：用于处理Vue单文件组件（.vue文件）的Webpack加载器。

npm install vue-loader@next --save-dev

@vue/compiler-sfc：用于编译Vue 3的单文件组件的编译器。

npm install @vue/compiler-sfc --save-dev

HTML 插件

html-webpack-plugin：自动创建HTML文件来服务Webpack打包后的脚本。

npm install html-webpack-plugin --save-dev

CSS 处理

css-loader：解析CSS文件，并将其转换为JavaScript模块。

npm install css-loader --save-dev

style-loader：将模块的导出作为样式添加到DOM中。

npm install style-loader --save-dev

开发服务器（可选）

webpack-dev-server：提供了一个简单的web服务器和实现热重载的能力。

npm install webpack-dev-server --save-dev

支持ES6+的Babel转译（可选）

babel-loader：用于转译JavaScript文件。

npm install babel-loader @babel/core @babel/preset-env --save-dev

支持Sass（可选）

sass-loader：加载和编译Sass/SCSS文件。

npm install sass-loader sass --save-dev