webpack 输出(Output)

在 Webpack 中，输出（Output）是指将打包后的代码输出到一个指定的目录中。通过配置输出，我们可以控制打包后文件的名称、路径以及其他相关的选项。

输出配置

在 webpack 的配置文件中，我们可以通过 output 属性来配置输出的相关选项。下面是一个示例的 output 配置：

// www.javascriptcn.com code example
const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出配置
  output: {
    // 输出目录
    path: path.resolve(__dirname, 'dist'),
    // 输出文件名
    filename: 'bundle.js',
    // 公共路径
    publicPath: '/'
  }
};

在上面的配置中，我们指定了打包后的文件输出到 dist 目录中，文件名为 bundle.js。同时，还可以通过 publicPath 属性指定静态资源的公共路径。

文件名

Webpack 支持使用占位符来动态生成输出的文件名。常用的占位符有：

• [name]：模块名称
• [id]：模块标识符
• [hash]：编译的哈希值
• [chunkhash]：模块的哈希值

下面是一个使用占位符的示例：

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

多入口文件

如果项目中有多个入口文件，可以使用对象的方式来配置输出：

// www.javascriptcn.com code example
module.exports = {
  // 多入口文件
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js'
  }
};

在上面的配置中，我们指定了两个入口文件分别为 app.js 和 vendor.js，打包后会生成两个对应的输出文件。

以上就是关于 Webpack 输出的介绍，通过合理的配置输出选项，我们可以更好地控制打包后文件的生成方式。