輸出

設定 `output` 設定選項會告訴 webpack 如何將編譯檔案寫入磁碟。請注意,雖然可以有多個 `entry` 進入點,但只會指定一個 `output` 設定。

用法

webpack 設定中 `output` 屬性的最低要求是將其值設定為物件,並提供一個 output.filename 用於輸出檔案

webpack.config.js

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

此設定會在 `dist` 目錄中輸出單一 `bundle.js` 檔案。

多個進入點

如果您的設定建立多於一個「區塊」(例如使用多個進入點或使用 CommonsChunkPlugin 等外掛時),您應該使用 替換 以確保每個檔案都有唯一名稱。

module.exports = {
  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 和資產雜湊的更複雜範例

config.js

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

在編譯時不知道輸出檔案最終的 `publicPath` 的情況下,它可以留空,並在執行階段透過進入點檔案中的 `__webpack_public_path__` 變數動態設定

__webpack_public_path__ = myRuntimePublicPath;

// rest of your application entry

5 貢獻者

TheLarkInnchyipinrouzbeh84byzykEugeneHlushko