Webpack 輸出(output)

2023-05-15 17:26 更新

可以通過配置 ?output? 選項(xiàng),告知 webpack 如何向硬盤寫入編譯文件。注意,即使可以存在多個(gè) ?entry? 起點(diǎn),但只能指定一個(gè) ?output? 配置。

用法

在 webpack 配置中,?output? 屬性的最低要求是,將它的值設(shè)置為一個(gè)對象,然后為將輸出文件的文件名配置為一個(gè) ?output.filename?:

webpack.config.js

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

此配置將一個(gè)單獨(dú)的 ?bundle.js? 文件輸出到 ?dist? 目錄中。

多個(gè)入口起點(diǎn)

如果配置中創(chuàng)建出多于一個(gè) "chunk"(例如,使用多個(gè)入口起點(diǎn)或使用像 CommonsChunkPlugin 這樣的插件),則應(yīng)該使用 占位符(substitutions) 來確保每個(gè)文件具有唯一的名稱。

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

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

高級(jí)進(jìn)階

以下是對資源使用 CDN 和 hash 的復(fù)雜示例:

config.js

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

如果在編譯時(shí),不知道最終輸出文件的 ?publicPath? 是什么地址,則可以將其留空,并且在運(yùn)行時(shí)通過入口起點(diǎn)文件中的 ?__webpack_public_path__? 動(dòng)態(tài)設(shè)置。

__webpack_public_path__ = myRuntimePublicPath;

// 應(yīng)用程序入口的其余部分


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)