Webpack 是现代前端开发中不可或缺的工具，其核心在于通过 webpack.config.js 文件定义项目构建规则。以下是关键配置要点：

🛠️ 基础配置结构

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 模块规则
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  // 插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

📦 常见配置项解析

  • entry：指定入口文件，支持数组形式定义多个入口
  • output：定义输出路径和文件名，path.resolve 可避免路径问题
  • module.rules：加载器配置，如 babel-loader 用于转译ES6+代码
  • resolve.extensions：自动解析文件扩展名，简化导入语法
  • mode：开发模式（development）或生产模式（production）

🚀 优化技巧

  • 使用 splitChunks 实现代码分割 📁
  • 配合 devServer 实现热更新 🔥
  • 通过 optimization 选项开启Tree Shaking 🌳
  • 设置 cache 提升构建速度 💨

📘 扩展阅读

如需深入理解Webpack核心概念，可参考：
/zh/tutorials/webpack_basics

Webpack