devserver 簡(jiǎn)介 --webpack-dev-server解決的問題
-提供http服務(wù)
-監(jiān)聽文件變化餐禁、實(shí)時(shí)刷新
-支持Source Map 方便調(diào)試
上代碼
1.安裝webpack-dev-server
npm i -D webpack-dev-server
- 運(yùn)行webpack-dev-server命令
node_modules/.bin/webpack-dev-server
網(wǎng)上給的webpack-dev-server命令是錯(cuò)誤的缺菌，不能夠正常運(yùn)行Ｖ治Ｗ娲辍烘苹！
網(wǎng)上給的webpack-dev-server命令是錯(cuò)誤的矮固，不能夠正常運(yùn)行！Ｂ戎省！
網(wǎng)上給的webpack-dev-server命令是錯(cuò)誤的祠斧，不能夠正常運(yùn)行Ｎ挪臁！琢锋！
記住是 node_modules/.bin/webpack-dev-server!!!
記住是 node_modules/.bin/webpack-dev-server!!!
記住是 node_modules/.bin/webpack-dev-server!!!
用webpack-dev-server折騰了半天辕漂，報(bào)以下錯(cuò)誤
webpack-dev-server : 無法將“webpack-dev-server”項(xiàng)識(shí)別為 cmdlet、函數(shù)吴超、腳本文件或可運(yùn)行程序的名稱钉嘹。請(qǐng)檢查名稱的拼寫，如果包括路徑鲸阻，請(qǐng)確保路徑正確跋涣，然后再試
一次。
所在位置 行:1 字符: 1
+ webpack-dev-server ./webpack.config.js
+ ~~~~~~~~~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (webpack-dev-server:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
全局安裝npm i -D webpack-dev-server -g報(bào)找不到webpack模塊鸟悴，估計(jì)webpack也全局安裝估計(jì)能解決的陈辱，但是
與項(xiàng)目的構(gòu)建相悖，大部分項(xiàng)目我們是只在項(xiàng)目安裝webpack的相關(guān)依賴细诸。
最后用 node_modules/.bin/webpack-dev-server解決了問題的沛贪，有知道原因的仁兄請(qǐng)您留言給我。
- 運(yùn)行后控制臺(tái)會(huì)答應(yīng)出很多東西震贵，列出以下有用的部分
PS E:\demo\webpack\demo1.2-devserver> node_modules/.bin/webpack-dev-server
i ?wds?: Project is running at http://localhost:8081/
i ?wds?: webpack output is served from /
i ?wds?: Content not from webpack is served from E:\demo\webpack\demo1.2-devserver
i ?wdm?: Hash: 820c714fe24d911744ea
Project is running at http://localhost:8081/的就是告訴我們利赋，我們運(yùn)行的服務(wù)運(yùn)行在什么地方。
在瀏覽器打開可以瀏覽頁面猩系。到此已經(jīng)完成了媚送，簡(jiǎn)單的devServer的搭建。
此時(shí)修改了頁面一些內(nèi)容寇甸，然后保存了一下季希，控制臺(tái)貌似在編譯褪那，但是刷新頁面并沒有什么變化。
- 修改
webpack.config.js為下面內(nèi)容式塌。
const path= require ('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { join } = require('path');
module.exports = {
entry:'./app.js',
output: {
filename:'bundle.js',
path: path.resolve( __dirname,'dist')
},
module:{
rules:[
{
test:/\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
devServer: {
contentBase: path.join(__dirname, "dist"), //指定生成的地址
hot: true, // 熱更新
inline:true, //自動(dòng)更新
host: 'localhost',
port: 8081,
open: true
},
plugins:[
new MiniCssExtractPlugin(
{
filename: `[name].css`
}
)
],
mode: 'none'
}
跟以往的配置比多了devServer博敬。
-
contentBase指定運(yùn)行環(huán)境目錄 -
hot熱更新， 貌似不配置此項(xiàng)也可以熱更新峰尝？偏窝？？ -
inline自動(dòng)更新貌似不加也可以自動(dòng)更新武学？祭往？？ -
host運(yùn)行環(huán)境地址如果設(shè)置'0.0.0.0'允許其他瀏覽器訪問, localhost 只能本機(jī)訪問 -
port運(yùn)行端口 -
open是否自動(dòng)打開瀏覽器
- 此時(shí)運(yùn)行
node_modules/.bin/webpack-dev-server
如果項(xiàng)目沒有打包過火窒，會(huì)發(fā)現(xiàn)不能訪問
cann`t get/
沒關(guān)系硼补，因?yàn)楝F(xiàn)在訪問的是dist目錄，沒有dist當(dāng)然是找不到了熏矿。
- 創(chuàng)建文件已骇，復(fù)制html
創(chuàng)建dist文件夾mkdir dist
進(jìn)入dist目錄cd dist
創(chuàng)建index.html文件type > index.html
*當(dāng)然也可以手動(dòng)創(chuàng)建，介紹的命令是基于window
修改index.html
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> </head>
<link href="./main.css" rel="stylesheet" type="text/css" />
<body> <div id="app" ></div>
<script src="./bundle.js"></script>
</body>
</html>
- 修改一下試試票编，完美實(shí)現(xiàn)了熱更新.但是每次輸入很長(zhǎng)的命令有點(diǎn)不優(yōu)雅褪储。
npm run dev是比較優(yōu)雅的操作
修改package.josn
script添加一行
"dev":"node_modules/.bin/webpack-dev-server"
附上package.josn代碼
{
"name": "demo1.1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./webpack.config.js",
"dev":"node_modules/.bin/webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^4.2.2",
"mini-css-extract-plugin": "^0.11.2",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
上一篇 3. webpage4.0 mini-css-extract-plugin插件簡(jiǎn)單介紹
下一篇 5.webpack配置簡(jiǎn)介-入門集
