328、Webpack學習筆記03 -【輸出】 2020.04.22

配置 output 選項可以控制 webpack 如何向硬盤寫入編譯文件。注意，即使可以存在多個 entry 起點，但只指定一個 output 配置。

1、用法(Usage)

在 webpack 中配置 output 屬性的最低要求是，將它的值設置爲一個對象，包括以下屬性：

• filename 用於輸出文件的文件名。

webpack.config.js

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

此配置將一個單獨的 bundle.js 文件輸出到 dist 目錄中。

2、多個入口起點

如果配置創建了多個單獨的 “chunk”（例如，使用多個入口起點或使用像 CommonsChunkPlugin 這樣的插件），則應該使用 佔位符(substitutions) 來確保每個文件具有唯一的名稱。

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

// 寫入到硬盤：./dist/app.js, ./dist/search.js

3、高級進階

以下是對資源使用 CDN 和 hash 的複雜示例：

config.js

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

如果在編譯時，不知道最終輸出文件的 publicPath 是什麼地址，則可以將其留空，並且在運行時通過入口起點文件中的 webpack_public_path 動態設置。

__webpack_public_path__ = myRuntimePublicPath;

// 應用程序入口的其餘部分

4、參考文獻

[01] 輸出 - Webpack官方文檔