webpack学习笔记

Webpack 是一款现代前端工程化核心工具

模块打包器：原生支持ES Modules/CommonJS等模块规范，构建依赖图谱(dependency graph)实现智能打包

资源处理器：通过Loader系统处理： JavaScript（Babel转译） 、CSS（Sass/Less编译）  图片/字体（优化/Base64转换） 、 现代框架（Vue/React单文件组件）

优化引擎:Tree Shaking（ES6模块静态分析）、Code Splitting（动态加载优化）、Scope Hoisting（作用域提升）、压缩混淆（TerserPlugin）

学习曲线建议：

1. 基础配置（entry/output/loader）
2. 开发环境配置（devServer/HMR）
3. 生产优化（代码分割/缓存策略）
4. 自定义插件开发
5. 性能调优（构建速度/输出优化）

构建分析工具

# 生成分析报告
npx webpack --profile --json > stats.json

# 可视化分析工具
npm install --save-dev webpack-bundle-analyzer

基础配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 开发模式配置
  mode: 'development',
  
  // 入口配置
  entry: {
    main: './src/index.js',
    vendor: ['react', 'react-dom']
  },

  // 输出配置
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },

  // 模块处理规则
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  },

  // 插件系统
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico'
    })
  ],

  // 开发服务器
  devServer: {
    static: './dist',
    hot: true,
    historyApiFallback: true,
    port: 3000
  },

  // 优化配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

环境区分

// webpack.config.js
module.exports = (env) => {
  const isProduction = env.mode === 'production';
  
  return {
    mode: env.mode || 'development',
    devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(env.mode)
      })
    ]
  }
}