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: '/'
  }
};

在这个配置中：

• path 指定了输出文件的目录，通常使用 path.resolve 来生成绝对路径。
• filename 指定了输出文件的名称。
• publicPath 指定了资源在浏览器中的访问路径。

本题详细解读

1. path

path 是输出文件的目录路径。通常使用 path.resolve 来生成绝对路径，以确保路径的正确性。例如：

path: path.resolve(__dirname, 'dist')

这里 __dirname 是 Node.js 中的一个全局变量，表示当前文件所在的目录。dist 是输出目录的名称。

2. filename

filename 是输出文件的名称。你可以根据需要指定不同的文件名。例如：

filename: 'bundle.js'

如果你有多个入口文件，可以使用 [name] 占位符来生成不同的文件名：

filename: '[name].bundle.js'

3. publicPath

publicPath 是资源在浏览器中的访问路径。它通常用于指定 CDN 地址或者部署到服务器的路径。例如：

publicPath: 'https://cdn.example.com/assets/'

如果资源是部署在服务器的根目录下，可以设置为：

publicPath: '/'

4. 其他常用配置

• chunkFilename: 用于指定非入口 chunk 文件的名称。
• library: 用于指定库的名称，通常用于构建库时使用。
• libraryTarget: 用于指定库的导出方式，如 umd、commonjs2 等。

例如：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].bundle.js',
  chunkFilename: '[name].chunk.js',
  library: 'MyLibrary',
  libraryTarget: 'umd'
}

通过这些配置，你可以灵活地控制 Webpack 的输出行为，满足不同的项目需求。