Webpack 是现代前端开发中不可或缺的模块打包工具，能够智能处理 JavaScript、CSS、图片等资源。以下是核心知识点梳理：

📚 1. 基础概念

  • 模块打包：将多个文件合并为一个或多个 bundles，优化加载性能
  • 加载器（Loader）：转换文件类型（如 babel-loader 处理 JS 语法）
  • 插件（Plugin）：扩展功能（如 html-webpack-plugin 生成 HTML 文件）
  • 开发服务器：内置热更新功能，提升开发效率 💡

⚙️ 2. 典型配置

// webpack.config.js 示例
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' })
  ]
};

📦 3. 实用功能

  • 代码分割：通过 splitChunks 实现按需加载
  • Tree Shaking：删除未使用的代码，减小包体积
  • 热更新（HMR）：devServer.hot: true 实现实时更新
  • 环境变量：使用 DefinePlugin 注入不同环境配置

🌐 4. 学习资源

webpack_icon

通过合理配置 Webpack，可以显著提升前端项目的构建效率和运行性能。建议结合官方文档与实际项目练习，逐步掌握其强大功能。