Webpack的常用概念和基本配置

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = {// 入口文件 定义 Webpack 构建依赖图的起点entry: './src/index.js',// 指定打包后的资源输出位置和命名规则。output: {filename: '[name].bundle.js',path: path.resolve(__dirname, '../dist'),chunkFilename: '[name].[contenthash].chunk.js', // 动态导入的 chunk 命名规则 用于代码分割publicPath: '/', // 确保 chunk 的公共路径正确clean: true, // 自动清理旧文件（Webpack 5+）},// 模块规则 - 覆盖基础配置 处理非js文件 转为webpack能识别的模块// Webpack 将每个文件视为模块（如 JS、CSS、图片），通过依赖关系构建依赖图。// loader执行流程：文件资源 (如 .scss) → 匹配 Loader 规则 → 按顺序应用 Loaders → 转换为 JS 模块// Loaders 从右到左（或从下到上）执行。 例如： use: ['style-loader', 'css-loader', 'sass-loader'] 的执行顺序为： sass-loader → css-loader → style-loader 。module: {rules: [// 处理 CSS 文件//style-loader：将 CSS 注入 DOM。//css-loader：解析 CSS 文件中的 @import 和 url()。//sass-loader：将 Sass/SCSS 编译为 CSS。//sass：Sass 编译器（Dart Sass 实现）。//postcss-loader 和 autoprefixer：自动添加浏览器前缀。//mini-css-extract-plugin：提取 CSS 为独立文件（生产环境推荐）。//css-minimizer-webpack-plugin：压缩 CSS（生产环境推荐）。{test: /\.css$/,use: [// 开发环境用 style-loader，生产环境用 MiniCssExtractPlugin.loaderprocess.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 						'style-loader','css-loader','postcss-loader', // 可选：添加浏览器前缀],},// 处理 SCSS/Sass 文件{test: /\.(scss|sass)$/,use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 							'style-loader','css-loader','postcss-loader', // 可选：添加浏览器前缀'sass-loader',],},]},// 插件//扩展 Webpack 的能力，干预构建流程的任意阶段。//执行更复杂的任务，如代码压缩、资源优化、环境变量注入等。// 初始化 → 读取配置 → 创建 Compiler → 挂载 Plugins → 编译模块 → 优化 → 输出plugins: [// 自动生成 HTML 文件，并注入打包后的资源new HtmlWebpackPlugin({template: './src/index.html',}),// 提取 CSS 为独立文件//mini-css-extract-plugin：提取 CSS 为独立文件（生产环境推荐）。new MiniCssExtractPlugin({filename: '[name].[contenthash].css',}),// 压缩new CompressionPlugin({algorithm: 'gzip',test: /\.(js|css|html|svg)$/,threshold: 10240, // 10kb 以上压缩minRatio: 0.8}),// 注入全局环境变量new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production'),'__VUE_OPTIONS_API__': true,'__VUE_PROD_DEVTOOLS__': false})],// 优化optimization: {usedExports: true, // 标记未使用的导出minimize: true, // 启用压缩（删除未使用代码）minimizer: [// 压缩 CSS（生产环境）new CssMinimizerPlugin(),],// 代码分割 优化公共代码提取 将代码拆分为多个文件（chunks），实现按需加载或并行加载，优化性能。splitChunks: {chunks: 'all', // 对所有模块进行分割（包括异步和非异步）cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,name: 'vendors', // 提取 node_modules 代码为 vendors 块priority: 10, // 优先级reuseExistingChunk: true,},common: {minChunks: 2, // 被至少两个 chunk 引用的代码name: 'common',priority: 5,reuseExistingChunk: true,},},},},
}