输出(Output)

配置 output 选项告诉 webpack 如何向磁盘写入编译的文件。请注意,虽然可以有多个 entry(入口点),但只能指定一个 output 配置。

用法

在你的 webpack 配置中,output 属性的最低要求是将其值设置为至少包含以下两项内容的对象:

  • filename —— 输出文件的文件名。
  • path —— 输出目录的绝对路径。

webpack.config.js

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

上述配置将一个 bundle.js 文件输出到 /home/proj/public/assets 目录中。

多入口

如果你的配置创建多个“块”(如使用多个入口点或使用像 CommonsChunkPlugin 这样的插件),则应使用占位符(substitution)来确保每个文件具有唯一的名称。

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// writes to disk: ./dist/app.js, ./dist/search.js

高级用法

以下是使用 CDN 和哈希(hash)资源的更复杂示例:

config.js

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}

如果在编译时最终输出文件的 publicPath 是未知的,则它可以留空,并在运行时在入口文件中动态设置。如果编译时不知道 publicPath,则可以忽略它,并在入口中设置 __webpack_public_path__

__webpack_public_path__ = myRuntimePublicPath

// rest of your application entry