Webpack打包器皮膚進階

發表於2017-11-07

Web

Webpack模組打包器皮膚進階

終端畫面，漂亮的webpack皮膚

Webpack-dashboard外掛在Github網站上星數超過10000，但我還幾乎從沒碰過。這麼棒的外掛，為什麼不利用起來呢？現在，瞄準的就是你倆：create-react-app和vue-cli?

記住，要是背後有人偷看到這個畫面，就假裝在為美國國家航天局NASA工作。

使用webpack，尤其是執行webpack的開發者伺服器時，以下畫面可能大家已經見慣了。

我們都知道webpack的日誌資訊有多好，但我也的確很好奇，這一屏的資訊到底是給誰看的？遠超人類的高等外星生物嗎？

webpack的日誌資訊急需配一個友好的介面。

救星來了！Webpack-dashboard皮膚

看起來好多了

讓人讀起來是不是容易得多了？

這兩個工具都是基於模板構建程式的，都是最熱門的。讓我們看一下它們如何使用webpack日誌功能的：

create-react-app

vue-cli

還不壞。 Webpack日誌告訴我們編譯成功與否，以及webpack伺服器監聽的埠。但肯定還有改進的餘地，哪怕只是一點點。

create-react-app和vue-cli中的錯誤處理

第一個： React，第二個：Vue

很好！一有句法錯誤，我們就立刻得到通知了！

Create-react-app和vue-cli的最終成品輸出

也很好，沒什麼可說的！讓我們試試webpack皮膚吧。

自定義配置下皮膚的使用

到webpack庫的這個頁面上去，把自定義webpack配置克隆下來，再找到第五章，並安裝npm依存關係包。

git clone git@github.com:wesharehoodies/webpack-2.0-from-scratch.git && cd webpack-2.0-from-scratch && git checkout chapter-5 && npm i && npm run start

把這個命令貼上到終端上

這裡的指導說明共有五個章節，一步一步教大家如何設定webpack配置。強烈推薦大家通讀！

貼上好命令，再加上一點耐心，然後應該看到下面的畫面。

很好！正是我們想要的。現在加上變化！

用NPM： npm install webpack-dashboard --save-dev

用YARN： yarn add webpack-dashboard

在webpack.config.js裡需要匯入皮膚外掛，並用new關鍵詞呼叫外掛。就像這樣：

最後，更新一下package.json指令碼，結果如下：

  "scripts": {
    "build": "webpack --progress",
    "start": "webpack-dashboard -- webpack-dev-server -d --hot --config webpack.config.js --watch",
    "production": "NODE_ENV=production webpack -p"
  },

"scripts": {

"build": "webpack --progress",

"start": "webpack-dashboard -- webpack-dev-server -d --hot --config webpack.config.js --watch",

"production": "NODE_ENV=production webpack -p"

用npm run start命令啟動webpack,然後就能看到:

哇！太棒了！跟不上的話，這裡有原始碼 ❤

順帶一提，我們用不著這麼巨大的皮膚。下面這個例項，顯示了視窗大小的調整。感謝iTerm。

皮膚外掛和Create-react-app

可惜我們必須執行彈出引數。

npm i -g create-react-app && create-react-app react-webpack-dashboard && cd react-webpack-dashboard && npm run eject

我不是很喜歡彈出，不過要是有其它方法，請告訴我！設定方法和自定義配置相同。

開啟config/webpack.config.dev.js檔案，加入皮膚外掛，別忘了要在plugins: []外掛表部分包含這個外掛。可以用CTRL + F快捷鍵查詢外掛表部分，應該在第214行左右的地方。

開啟package.json檔案，更新一下啟動指令碼，如下：

"start": "webpack-dashboard -- node scripts/start.js",

1	"start": "webpack-dashboard -- node scripts/start.js",

好了，該測試了! 執行下面的命令

npm run start

成了。

皮膚外掛和Vue-cli

 npm i -g vue-cli && vue init webpack vue-webpack-dashboard && cd vue-webpack-dashboard && npm i --save-dev webpack-dashboard

1	npm i -g vue-cli && vue init webpack vue-webpack-dashboard && cd vue-webpack-dashboard && npm i --save-dev webpack-dashboard

Vue沒有彈出的概念。既然沒什麼代價，就不用傷腦筋了。

開啟build/webpack.dev.conf.js 檔案，加入外掛(第9行)，還有(第23行)也要插入外掛。

最後，到package.json檔案裡，修改開發指令碼，如下：

“dev”: “webpack-dashboard — node build/dev-server.js”,

1	“dev”: “webpack-dashboard — node build/dev-server.js”,

測試：