Webpack：配置出口(Output)

輸出Output

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

filename

output.filename 配置輸出文件的名稱，爲string 類型。 如果只有一個輸出文件，則可以把它寫成靜態不變的：

filename: 'bundle.js'

但是在有多個 Chunk 要輸出時，就需要藉助模版和變量了。前面說到 Webpack 會爲每個 Chunk取一個名稱，可以根據 Chunk 的名稱來區分輸出的文件名：

filename: '[name].js'

代碼裏的 [name] 代表用內置的 name 變量去替換 [name] ，這時你可以把它看作一個字符串模塊函數， 每個要輸出的 Chunk 都會通過這個函數去拼接出輸出的文件名稱

內置變量除了 name 還包括：

變量名	含義
id	Chunk 的唯一標識，從0開始
name	Chunk 的名稱
hash	Chunk 的唯一標識的 Hash 值
chunkhash	Chunk 內容的 Hash 值

其中 hash 和 chunkhash 的長度是可指定的， [hash:8] 代表取8位 Hash 值，默認是20位

path

output.path 配置輸出文件存放在本地的目錄，必須是 string 類型的絕對路徑。通常通過 Node.js 的 path 模塊去獲取絕對路徑：

path: path.resolve(__dirname, 'dist_[hash]')

publicPath

在複雜的項目裏可能會有一些構建出的資源需要異步加載，加載這些異步資源需要對應的 URL 地址。

output.publicPath 配置發佈到線上資源的 URL 前綴，爲string 類型。 默認值是空字符串 ‘’，即使用相對路徑。

這樣說可能有點抽象，舉個例子，需要把構建出的資源文件上傳到 CDN 服務上，以利於加快頁面的打開速度。配置代碼如下：

filename:'[name]_[chunkhash:8].js'
publicPath: 'https://cdn.example.com/assets/'

這時發佈到線上的 HTML 在引入 JavaScript 文件時就需要：

<script src='https://cdn.example.com/assets/a_12345678.js'></script>

用法

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

• filename 用於輸出文件的文件名
• 目標輸出目錄 path 的絕對路徑

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

module.exports = config;

多個入口起點

如果配置創建了多個單獨的 “chunk”，則應該使用佔位符(substitutions)來確保每個文件具有唯一的名稱

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

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