webpack-dev-server使用
webpack-dev-server的作用類似於熱部署。
下面根據一個例子闡述該插件的使用，本博客默認你已經安裝好了webpack且已經配置好了相關文件，若你還沒完成這一步，請看教程：webpack4.x安裝及基本使用。
1 本地安裝
npm i webpack-dev-server -D
2 修改package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack",
"server": "webpack-dev-server"
},
3 添加index.html和index.js
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack初探</title>
<script src="./bundle.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
</html>
請注意bundle.js的引用路徑，我會在後面提到爲什麼要這樣寫。
index.js：
// es6導入包
import $ from "jquery";
$(function() {
$("li:odd").css("backgroundColor", "yellow");
$("li:even").css("backgroundColor", function() {
return "#" + "D97634";
});
});
4 運行命令
npm run server
運行了此命令後，便開啓了熱部署。
5 查看效果
在瀏覽器中輸入網址：http://localhost:8080/src/，即可打開該項目。
此時修改index.js中的內容，網頁也會相應改變了，這是通過改變http://localhost:8080/bundle.js文件以達到該效果的，即webpack-dev-server會隨着index.js的變化而動態的在虛擬根目錄下生成打包的bundle.js文件，使得網頁內容動態的發生改變，請注意這一過程並不是動態的覆蓋出口文件而進行的，這是爲了速度更快。
6 一些常用設置
配置編譯後即打開瀏覽器、默認3000端口、打開src目錄，熱更新：
可以修改package.json：
"server": "webpack-dev-server --open --port 3000 --contentBase src --hot"
也可以在webpack.config.js文件中配置：
devServer: {
open: true,
port: 3000,
contentBase: "src",
hot: true
}