Webpack 详细配置选项

Webpack 再入门（3）：详细配置

在 Webpack 入门指南的前两篇文章中，我们介绍了它的基础知识和使用方法。今天，我们将深入研究 Webpack 的配置选项，帮助你掌握如何自定义构建过程，以满足你的特定需求。

入口（Entry）

Webpack 的入口点是你的应用程序的起点，它告诉 Webpack 从哪里开始构建。可以通过设置 entry 选项来配置入口点。

// 单入口，形成一个 chunk，输出一个 bundle
entry: 'src/index.js'

// 多入口，形成多个 chunk，输出多个 bundle
entry: {
  main: 'src/main.js',
  vendor: 'src/vendor.js'
}

输出（Output）

输出配置指定了编译后的代码的生成位置和名称。通过设置 output 选项来配置输出。

output: {
  // 编译后的文件生成路径
  path: path.resolve(__dirname, 'dist'),

  // 编译后的文件名
  filename: 'bundle.js'
}

加载器（Loader）

加载器用于预处理各种类型的文件，如图像、样式表和脚本。通过配置 module.rules 来添加加载器。

module: {
  rules: [
    {
      // 匹配所有 .css 文件
      test: /\.css$/,

      // 使用 css-loader 来处理 .css 文件
      use: ['css-loader']
    },

    {
      // 匹配所有 .js 文件
      test: /\.js$/,

      // 使用 babel-loader 来处理 .js 文件
      use: ['babel-loader']
    }
  ]
}

插件（Plugin）

插件扩展了 Webpack 的功能，提供了额外的功能和优化。可以通过 plugins 选项添加插件。

plugins: [
  new HtmlWebpackPlugin({
    // 注入编译后的代码到 HTML 模板
    template: 'src/index.html'
  }),

  new UglifyJsPlugin({
    // 压缩编译后的代码
    uglifyOptions: {
      compress: {
        warnings: false
      }
    }
  })
]

模式（Mode）

模式允许你为不同的环境配置 Webpack，例如开发和生产。通过设置 mode 选项来选择模式。

mode: 'development' // 开发模式

mode: 'production' // 生产模式

详细配置

以上介绍了 Webpack 的一些基本配置选项。完整配置选项列表如下：

• context : Webpack 上下文，默认为项目根目录
• entry : 入口点，告诉 Webpack 从哪里开始构建
• output : 输出配置，指定了编译后代码的生成位置和名称
• target : 编译目标，如 web、node 或 electron
• externals : 外部模块，Webpack 不会打包
• resolve : 解析配置，指定了模块如何解析
• module : 加载器配置，用于预处理不同类型的文件
• plugins : 插件配置，扩展了 Webpack 的功能
• devServer : 开发服务器配置，用于在开发过程中提供服务
• performance : 性能配置，用于优化构建性能
• optimization : 优化配置，用于进一步优化编译后的代码
• devtool : 源映射配置，用于调试编译后的代码
• stats : 统计配置，控制构建日志的输出
• mode : 模式配置，用于为不同的环境配置 Webpack

---