iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0

昨天我們介紹 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 這隻檔案的功用

我們前面提到,webpackwebpack-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.jswebpack.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 介紹完

我們明天見


上一篇
深入探索 vue-cli,讓我們來看看 build/build.js 與 build/webpack.dev.conf.js 做了些什麼!
下一篇
webpack-vue boilerplate, 介紹 utils, config, baseWebpackConfig
系列文
平時沒注意的 JavaScript - JS 生態系及週邊工具整理33

1 則留言

0
王聖凱
iT邦新手 5 級 ‧ 2018-02-17 15:09:21

我的產生出來有多這兩個

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

我要留言

立即登入留言