webpack 配置 entry、output、mode 详解

webpack 是一个打包工具，它可以将各种前端资源（CSS、JS、图片等）进行打包和优化，减少页面的 HTTP 请求次数，提高页面性能。在 webpack 的配置中，有几个重要的选项，分别是 entry、output、mode。在本文中，我们将详细介绍这三个选项的配置及其作用。

Entry

Entry 是 webpack 打包的入口。它告诉 webpack 从哪个模块开始打包。一个入口可以是一个或多个模块的组合，也可以是一个依赖关系的根节点。

在 webpack 的配置文件中，可以使用对象、数组或字符串来配置 Entry。

对象配置

对象配置是最灵活的方式，可以为每个入口设置名字和路径。

entry: {
  main: './src/main.js',
  vendor: './src/vendor.js'
}

上面的配置表示，有两个入口，分别是 main 和 vendor，它们的路径分别为 ./src/main.js 和 ./src/vendor.js。

数组配置

数组配置可以将多个模块打包成一个模块，但是并不常用。

entry: ['./src/main.js', './src/vendor.js']

上面的配置表示，将 ./src/main.js 和 ./src/vendor.js 两个模块打包成一个模块。

字符串配置

字符串配置表示只有一个入口。

entry: './src/index.js'

上面的配置表示，只有一个入口，路径为 ./src/index.js。

Output

Output 是 webpack 打包后输出的文件，它告诉 webpack 打包后的文件存放位置及文件名。在 webpack 的配置文件中，可以使用对象来配置 Output。

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].bundle.js',
  publicPath: '/'
}

上面的配置表示，打包后的文件将会存放在 ./dist 目录下，文件名为 name.bundle.js，其中 name 会被替换为入口的名称，即 main.bundle.js 和 vendor.bundle.js。此外，publicPath 是资源的公共路径，可以用于 CDN 等场景。

Mode

Mode 是 webpack 的模式，它可以控制打包后的文件是否压缩，是否自动优化代码等。webpack 4.x 引入了 Mode 的概念，提供了三种模式：development、production 和 none。

Development

在 Development 模式下，webpack 打包的文件不会被压缩，打包后的代码将保留完整的注释和操作符，从而方便调试和定位错误。

mode: 'development'

Production

在 Production 模式下，webpack 打包文件将被压缩，同时自动移除未使用的代码以及无用的注释。

mode: 'production'

None

在 None 模式下，webpack 不会对打包文件进行任何优化和压缩，适用于一些特殊的场景。

mode: 'none'

示例代码

下面是一个完整的 webpack 配置示例代码。

const path = require('path');

module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: '/'
  },
  mode: 'development'
}

总结

本文从 entry、output、mode 三个方面详细讲解了 webpack 的配置，并给出了示例代码。合理地配置打包工具可以大大提高页面性能和开发效率，希望本文对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b8fb5fadd4f0e0ff187640