注意：
本文假設(shè)你有webpack 的基礎(chǔ)認(rèn)識。
本文的目的是實現(xiàn)一個服務(wù)器和實時刷新的功能。
當(dāng)文件發(fā)生改變并保存后，瀏覽器能夠自動刷新頁面，使得用戶無需手動刷新界面。
項目結(jié)構(gòu)如下所示：
開始實戰(zhàn)
創(chuàng)建一個目錄<code>webpack-demo4</code>,并安裝<code>wbepack</code>。
mkdir webpack-demo4 && cd webpack-demo4
npm init -y
npm install --save-dev webpack
安裝 <code>webpack-dev-server</code>,<code>style-loader</code>,<code>css-loader</code>
npm install webpack-dev-server style-loader css-loader --save-dev
webpack-dev-server的作用是為你提供了一個服務(wù)器和實時刷新的功能。
新建<code>index.html</code>文件
<!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>Document</title>
</head>
<body>
<script src="/bundle.js"></script>
</body>
</html>
注意： script標(biāo)簽中的文件路徑不能寫成’./dist/bundle.js',必須寫成'/bundle.js'或'http://localhost:8080/bundle.js'。
這是因為<code>webapck-dev-server</code>使用內(nèi)存編譯，所以bundle 不會被保存在硬盤上，你看不到編譯后的文件。
使用內(nèi)存編譯的工具還有<code>webpack-dev-middleware </code>
新建<code>index.css</code>文件
.root {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background: red;
}
新建<code>index.js</code>文件
import './index.css';
function create(){
const elem = document.createElement('div');
elem.classList.add('root');
elem.innerHTML = 'Hello World haha';
document.body.appendChild(elem);
}
create();
新建<code>webpack.config.js</code>文件
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
這里去掉了output對象中的“path:path.resolve(__dirname,'dist')”的代碼。這因為內(nèi)存編譯，不輸出具體文件，所以不必指定dist文件夾了。
修改<code>package.json</code>文件中的'scripts'
"scripts": {
"start": "webpack-dev-server --open"
},
最后啟動命令
npm start
你會發(fā)現(xiàn)頁面會自動在瀏覽器打開。這個時候，不管你修改index.js還是index.css樣式，瀏覽器都會自動刷新頁面。
