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 這一行刪除

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 啦~

0%