webpack 管理输出

在 Webpack 中，管理输出是非常重要的一部分。通过配置输出，我们可以定义打包后的文件名、路径、公共路径等信息，使得我们的项目能够正确地输出打包后的文件。

输出配置

在 Webpack 的配置文件中，我们可以通过 output 字段来配置输出相关的信息。常见的配置选项包括：

• path：指定打包后文件的输出路径
• filename：指定打包后的文件名
• publicPath：指定在浏览器中引入打包后文件的公共路径

下面是一个简单的输出配置示例：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  }
}

在上面的配置中，我们指定打包后的文件将会输出到 dist 文件夹中，文件名为 bundle.js，并且在浏览器中引入文件时的公共路径为 /。

多入口配置

在实际项目中，我们可能会有多个入口文件需要打包。在这种情况下，我们可以通过配置多个入口来进行打包。

-- -------------------- ---- -------
-------------- - -
  ------ -
    ---- ---------------
    ------- -----------------
  --
  ------- -
    ----- ----------------------- --------
    --------- ------------------
  -
-

在上面的配置中，我们定义了两个入口文件 app.js 和 vendor.js，分别对应输出的文件名为 app.bundle.js 和 vendor.bundle.js。

文件指纹

为了避免浏览器缓存问题，我们通常会在打包后的文件名中添加文件指纹，即在文件名中添加一段 hash 值。这样每次文件内容变化时，文件名也会发生变化，从而可以避免浏览器缓存问题。

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js'
  }
}

在上面的配置中，我们使用 [contenthash] 占位符来添加文件指纹，确保每次文件内容变化时，文件名也会发生变化。

这就是 Webpack 中管理输出的一些常见配置和技巧，通过合理配置输出，我们可以更好地管理项目打包后的文件。