EP 4 - 關於 Webpack 學習這件小事之伺服器
前言
前面基本上常見的東西也算是也記錄了,這邊先來記錄一下該如何在 Webpack 中開啟模擬伺服器,否則每次編譯之後還要將 dist 拖曳進新的 VS Code 中開啟伺服器這樣實在太麻煩,所以這邊就來做一下紀錄哩~
起手式
又到了起手式的時間,首先依照官方文件的說明,我們必須先安裝 Webpack Server 到自己的本機以及專案,所以這邊要分兩次打指令
本機:
1 | npm install -g webpack-dev-server |
專案:
1 | npm install --save-dev webpack-dev-server |
設置 package.json
接下來開啟 package.json 將 script 這一行刪除
刪除後改成這一行
1 | "scripts":{ |
建立 webpack.config.js
一般來講會建立兩個檔案在跟目錄下,分別為 webpack.config.dev.js 及 webpack.config.prod.js,但是這邊我直接使用 webpack.config.js 來做調整就可以了。
1 | devServer: { |
contentBase: 要模擬 Server 的檔案路徑
port: 要開啟的 port 號
沒有問題就可以直接輸入 npm start
囉。
但是這邊我會稍微針對 webpack.config.js 做一些調整。
調整 HtmlWebpackPlugin 插件
依照官方說明,我們可以自定義寫入生成的 HTML 檔案,所以我在目錄下建立一個 page 資料夾,裡面會放各種我撰寫的 HTML
然後 webpack.config.js 的地方改成這樣
1 | new HtmlWebpackPlugin({ |
那 HTML 部分呢?隨意你撰寫,你高興就好。
可能會有人好奇這一段是幹嘛的 <title><%= htmlWebpackPlugin.options.title %></title>
,這一段主要是讓 webpack.config.js 中 HtmlWebpackPlugin
的 title 可以直接輸出到這裡的而已。
接下來只需要輸入 npm start
你就可以看到畫面啦~
關於熱加載
關於熱加載這件事情呢,基本上 webpack-dev-server 內建有支援熱加載,但是這邊有一個雷點在 Webpack 3 以上不用這樣寫
只需要這樣寫即可
否則有可能會出現第一次會熱加載,第二次 Webpack 就不甩你的狀況~
接下來下一篇就是準備加入 babel 啦~