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 mapdevtool: 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(), // 压缩JavaScriptnew 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