昨天，介紹了 <04 - 心法1 - 根源> Entry，非常重要，因為在設定檔(webpack.config.js)，我們指定了 entry，那相對應的就要有 output，先回顧一下該檔的內容目前應該是：

module.exports = {
  entry: {
    app: './app/index.js',
    vendors: './app/vendors.js'
  },
  output: {
    filename: 'bundle.js',
    path: './dist'
  }
}

目前若執行 webpack 指令來 bundle 的話，是會出錯的，如下(最後三行為錯誤訊息)：

Hash: ce94c79aca44581660de
Version: webpack 2.1.0-beta.27
Time: 394ms
    Asset    Size  Chunks             Chunk Names
bundle.js  543 kB       0  [emitted]  vendors
   [3] ./app/index.js 238 bytes {1} [built]
   [4] ./app/vendors.js 24 bytes {0} [built]
    + 3 hidden modules

ERROR in chunk app [entry]
bundle.js
Conflict: Multiple assets emit to the same filename 'bundle.js'

那麼該如何解決呢？

我們先來瞭解 output 的定義吧！

output 的定義

Options affecting the output of the compilation. output options tell Webpack how to write the compiled files to disk. Note, that while there can be multiple entry points, only one output configuration is specified.

簡而言之，就是將 entry 裡所指定的各 js，經由 bundle 的過程，輸出(output)到所指定的資料夾及自訂的檔名。值得留意的是，entry points 可以指定多個，但 output 只能指定一個。

output 設定裡，最重要的 filename 及 path

1、output.filename

先介紹 output.filename，因為這可以解決上述所說的問題，直接改成以下即可：

'[name]'：會直接用原檔案的主檔名來取代。

module.exports = {
  entry: {
    app: './app/index.js',
    vendors: './app/vendors.js'
  },
  output: {
    filename: '[name].js',
    path: './dist'
  }
}

執行 webpack 指令即可完成：

$ webpack
Hash: 03f6a1ed962f68c41a21
Version: webpack 2.1.0-beta.27
Time: 409ms
     Asset     Size  Chunks             Chunk Names
vendors.js   543 kB       0  [emitted]  vendors
    app.js  2.67 kB       1  [emitted]  app
   [3] ./app/index.js 238 bytes {1} [built]
   [4] ./app/vendors.js 24 bytes {0} [built]
    + 3 hidden modules

就會輸出 ./dist/vendors.js、./dist/app.js 了。

這樣就可以針對 multi entries 來輸出不同的檔案囉，真的覺得 webpack 很方便。

2、output.path

指定要將 entry 所指定的檔案，輸出到哪個資料夾。例如以上範例都直接寫成 ./dist，就是要輸出到 ./dist 資料夾：

…
  output: {
    …
    path: './dist'
  }
…

若 ./dist 資料夾本身不存在的話，也會自動建立。

若想輸出 Source Map

將設定檔( webpack.config.js )加上 devtool: "source-map" 即可，如下範例：

module.exports = {
  devtool: "source-map",
  entry: {
    …
  },
  …
}

其實在 Output 的設定選項裡，還有其它參數，不過我覺得不是那麼常用，所以在此就不一一列出，以免大家頭昏腦脹(其實應該是我頭昏腦脹…)，以上都是最重要且需要留意的。想看其它參數嗎？在這裡。

終於又結束今日的心法了。

明天，讓我們繼續往下個心法邁進，很重要的 Loaders 準備登場。敬請期待。