昨天我們介紹 use strict 這個關鍵字就花一篇了

今天我們將繼續來介紹 webpack.dev.conf.js 所引入的 module，以及設定了哪些變數

(我在這邊把他分成三類，npm module 自訂 module 常數)

要看本篇文章的 code 的話

可以上 https://codesandbox.io/s/github/alxtz/webpack-intro 來看

webpack.dev.conf.js 使用了哪些 npm module

webpack

在開始前，我們要先介紹 webpack.conf.js 這隻檔案的功用

我們前面提到，webpack 有 webpack-dev-server，提供了不少開發上動態載入、lint 的功能

也可以同時用來編譯

這代表著我們為了應付 開發上 以及 production 兩種 webpack 模式得使用

我們得要有兩種設定

在 build 裡總共有三隻重要的檔案

其中，webpack.base.conf.js 代表著 開發 和 production 通用的設定

像是編譯 .vue, .scss，這些大多都會設定在 webpack.base.conf.js

而 webpack.dev.conf.js 則是對應到開發上特有的設定

像是動態更新，webpack-dev-server 該使用哪個 port

都會設定在 webpack.dev.conf.js 裡

至於在 webpack.prod.conf.js 裡

你則可以找到許多關於壓縮、打包的相關設定

module - webpack

這裡 webpack 使用的地方沒有很多

在 21 行，我們會產生一個 devWebpackConfig 的物件

devWebpackConfig 這個物件的用途是

在最後，他會被 module.exports 釋出

代表這是真正會被 webpack 讀到的設定檔，要寫的格式會跟 webpack.config.js 一樣！

(這邊有一點滿酷的，我們其實會 export 一個 Promise)

webpack 在這裡的用途是初始化 webpack 的幾個 plugin

webpack 的 plugin 相較於 loader，他的功能更像是外掛

這邊做的幾件事

1. 初始化 HotModuleReplacement

2. 初始化 NamedModulesPlugin (功能只是把 HotModuleReplacement 的檔名顯示)

3. 初始化 NoEmitOnErrors(編譯發生錯誤時，不產生任何檔案)

4. 初始化 HtmlWebpackPlugin

   如果你還記得，webpack 預設只會產生出 build.js

   為了讓我們編譯出來的結果，是一個直接可用的資料夾

   HtmlWebpackPlugin 會幫我們產生出一個 index.html

   並把相關檔案都 script:src 引入

   

   

module - webpack-merge

webpack-merge 的功能也很簡單

他會提供一個 merge() function

只要你有許多個 webpack 設定檔，要融合在一起使用

(就像是我們現在要同時用 webpack.base.conf.js 和 webpack.dev.conf.js 一樣)

你就可以使用 merge(base, dev) 這樣的方式來產生設定檔

https://github.com/survivejs/webpack-merge

module - port-finder

因為我們 webpack-dev-server 會要開在某個 port

portfinder 基本上就是幫你找那個 port 能不能用

module - html-webpack-plugin

已介紹

module - friendly-errors-webpack-plugin

https://www.npmjs.com/package/friendly-errors-webpack-plugin

這個我非常愛

他會顯示非常漂亮的訊息

這個套件是使用 Chalk

來控制 cli 顏色的

utils, config, webpack.base.conf

這三個檔案都是自訂的 module

明天主要會把這三個自訂的 module 介紹完

我們明天見