Concepts - Output（官网）

官网链接：https://webpack.js.org/concepts/output/

这一章节讲述了配置 output 属性的方法

一、单个出口（简写）

设置 output 属性的最简单的方式就是如下形式，将 chunk 打包成 bundle.js 文件，并默认输出到 /dist 目录下

module.exports = {
  output: {
    filename: 'bundle.js',
  },
};

二、多个出口

如果在配置中创建了大于一个 chunk 时，就需要使用别的写法写法来确保每个文件有唯一的名字
配置项可以参看这个：https://webpack.js.org/configuration/output/#outputfilename

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

三、高级用法

一个复杂的例子：使用静态资源的 CDN 和 hashes

module.exports = {
  //...
  output: {
    path: '/home/proj/cdn/assets/[fullhash]',
    publicPath: 'https://cdn.example.com/assets/[fullhash]/',
  },
};

编译时中并不知道 publicPath 的最终输出文件是什么，所以 filename 留空，然后通过在 Entry Point 的动态变量 __webpack_public_path__ 来动态设置

__webpack_public_path__ = myRuntimePublicPath;
// rest of your application entry

「@浪里淘沙的小法师」