首先创建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