Webpack的常用概念和基本配置

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = requir('path')
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.loader
              process.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,
        },
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 将@映射到src目录
      '@components': path.resolve(__dirname, 'src/components') // 可选：子目录别名
    },
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.scss'], // 自动解析的后缀
    modules: ['src', 'node_modules'] // 优先从src和node_modules查找模块
  }
}