Webpack（3）Output输出

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。

基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。

注意，即使可以存在多个入口起点，但只指定一个输出配置。

在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：

1. filename 用于输出文件的文件名。
2. 目标输出目录 path 的绝对路径。

单入口起点

例子，此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中：

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

module.exports = config;

多入口起点

如果配置创建了多个单独的 “chunk”（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

// 写入到硬盘：./dist/app.js, ./dist/search.js
{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

高级进阶

为了使每次生成的文件都是单独唯一，且浏览器每次能读取到最新的文件，而不是从缓存中读取。我们需要使用hash，以下是使用 CDN 和资源 hash 的复杂示例：：

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

在编译时不知道最终输出文件的 publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运行时动态设置。

在入口起点设置__webpack_public_path__

__webpack_public_path__ = myRuntimePublicPath
// 剩余的应用程序入口