EP 4 - 關於 Webpack 學習這件小事之伺服器

發表於 更新於 分類於
前面基本上常見的東西也算是也記錄了，這邊先來記錄一下該如何在 Webpack 中開啟模擬伺服器，否則每次編譯之後還要將 dist 拖曳進新的 VS Code 中開啟伺服器這樣實在太麻煩，所以這邊就來做一下紀錄哩~

前言

前面基本上常見的東西也算是也記錄了，這邊先來記錄一下該如何在 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 這一行刪除

scripts

刪除後改成這一行

1
2
3
"scripts":{
  "start":"webpack-dev-server --config webpack.config.js"
},

scripts

建立 webpack.config.js

一般來講會建立兩個檔案在跟目錄下，分別為 webpack.config.dev.js 及 webpack.config.prod.js，但是這邊我直接使用 webpack.config.js 來做調整就可以了。

1
2
3
4
5
devServer: {
  contentBase: path.join(__dirname, 'dist'),
  compress: true,
  port: 3000
},

devServer

contentBase: 要模擬 Server 的檔案路徑
port: 要開啟的 port 號

沒有問題就可以直接輸入 npm start 囉。

但是這邊我會稍微針對 webpack.config.js 做一些調整。

調整 HtmlWebpackPlugin 插件

依照官方說明，我們可以自定義寫入生成的 HTML 檔案，所以我在目錄下建立一個 page 資料夾，裡面會放各種我撰寫的 HTML

HtmlWebpackPlugin

然後 webpack.config.js 的地方改成這樣

1
2
3
4
new HtmlWebpackPlugin({
  title: 'webpack title',
  template: './src/page/index.html'
}),

HTML

那 HTML 部分呢?隨意你撰寫，你高興就好。

HTML

可能會有人好奇這一段是幹嘛的 <title><%= htmlWebpackPlugin.options.title %></title>，這一段主要是讓 webpack.config.js 中 HtmlWebpackPlugin 的 title 可以直接輸出到這裡的而已。

接下來只需要輸入 npm start 你就可以看到畫面啦~

start

關於熱加載

關於熱加載這件事情呢，基本上 webpack-dev-server 內建有支援熱加載，但是這邊有一個雷點在 Webpack 3 以上不用這樣寫

熱加載

只需要這樣寫即可

熱加載

否則有可能會出現第一次會熱加載，第二次 Webpack 就不甩你的狀況~

接下來下一篇就是準備加入 babel 啦~