webpack配置详解之entry、output等常用配置属性解析

webpack 作为前端开发中最流行的模块打包工具之一，可以轻松帮助开发者将多个模块打包成一个文件。为了帮助开发者更好地使用 webpack，本文将对 webpack 中常用的配置属性进行详细解析。

1. entry

entry 属性指定了打包的入口文件。

• 参数类型

  1. 字符串： 单入口文件，打包形成一个 chunk，输出一个 bundle 文件。此时 chunk 的名称默认为 main。
  2. 数组： 多入口，所有入口文件最终只会形成一个 chunk，但输出的 bundle 文件数量与入口文件数量一致。chunk 的名称可以使用 [name]、[id] 等占位符来自动生成。
  3. 对象： 多入口，与数组类似，但可以为每个入口指定不同的输出名称和配置。

• 示例

module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  }
};

• 说明
  • 在该示例中，我们定义了两个入口文件：main.js 和 vendor.js。
  • 打包后，会生成两个 bundle 文件：main.js 和 vendor.js。

2. output

output 属性指定了打包输出的目录和文件名。

• 参数类型

参数	类型	默认值	说明
path	string	./dist	输出目录
filename	string	[name].js	输出文件名
publicPath	string	/	公共路径

• 示例

module.exports = {
  output: {
    path: './dist',
    filename: 'main.js',
    publicPath: '/static/'
  }
};

• 说明
  • 在该示例中，我们指定了输出目录为 ./dist，输出文件名为主 chunk.js，公共路径为 /static/。
  • 这意味着打包后的文件将输出到 ./dist 目录下，文件名为主 chunk.js，并且可以通过 /static/ 路径访问这些文件。

3. mode

mode 属性指定了 webpack 的运行模式。

• 参数类型

  • development： 开发模式
  • production： 生产模式

• 说明

  • 在开发模式下，webpack 会生成未压缩的代码，并启用 source map。
  • 在生产模式下，webpack 会生成压缩的代码，并禁用 source map。

• 示例

module.exports = {
  mode: 'production'
};

• 说明
  • 在该示例中，我们指定了 webpack 的运行模式为生产模式。

4. plugins

plugins 属性允许开发者使用各种插件来扩展 webpack 的功能。

• 参数类型

  • 数组： 插件列表

• 示例

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

• 说明
  • 在该示例中，我们使用 HtmlWebpackPlugin 插件来生成 HTML 文件。
  • HtmlWebpackPlugin 插件会将打包后的 JavaScript 文件自动注入到 HTML 文件中。

以上就是 webpack 中一些常用的配置属性的解析。希望本文能帮助开发者更好地理解和使用 webpack。