詳解webpack-dev-server使用方法
記錄下webpack-dev-server的用法.
首先，我們來看看基本的webpack.config.js的寫法
module.exports = {
entry: './src/js/index.js',
output: {
path: './dist/js',
filename: 'bundle.js'
}
}
配置文件提供一個(gè)入口和一個(gè)出口，webpack根據(jù)這個(gè)來進(jìn)行js的打包和編譯工作。雖然webpack提供了webpack --watch的命令來動(dòng)態(tài)監(jiān)聽文件的改變并實(shí)時(shí)打包，輸出新bundle.js文件，這樣文件多了之后打包速度會(huì)很慢，此外這樣的打包的方式不能做到hot replace，即每次webpack編譯之后，你還需要手動(dòng)刷新瀏覽器。
webpack-dev-server其中部分功能就能克服上面的2個(gè)問題。webpack-dev-server主要是啟動(dòng)了一個(gè)使用express的Http服務(wù)器。它的作用主要是用來伺服資源文件。此外這個(gè)Http服務(wù)器和client使用了websocket通訊協(xié)議，原始文件作出改動(dòng)后，webpack-dev-server會(huì)實(shí)時(shí)的編譯，但是最后的編譯的文件并沒有輸出到目標(biāo)文件夾，即上面配置的:
output: {
path: './dist/js',
filename: 'bundle.js'
}
注意：你啟動(dòng)webpack-dev-server后，你在目標(biāo)文件夾中是看不到編譯后的文件的,實(shí)時(shí)編譯后的文件都保存到了內(nèi)存當(dāng)中。因此很多同學(xué)使用webpack-dev-server進(jìn)行開發(fā)的時(shí)候都看不到編譯后的文件
下面來結(jié)合webpack的文檔和webpack-dev-server里部分源碼來說明下如何使用：
啟動(dòng)
啟動(dòng)webpack-dev-server有2種方式：
- 通過
cmd line - 通過
Node.js API
配置
我主要講解下cmd line的形式,Node.js API形式大家去看下官方文檔。可通過npm script進(jìn)行啟動(dòng)。我的目錄結(jié)構(gòu)是:
app |__dist | |__styles | |__js | |__bundle.js | |__index.html |__src | |__styles | |__js | |__index.js |__node_modules |__package.json |__webpack.config.js
content-base
設(shè)定webpack-dev-server伺服的directory。如果不進(jìn)行設(shè)定的話，默認(rèn)是在當(dāng)前目錄下。
webpack-dev-server --content-base ./dist
這個(gè)時(shí)候還要注意的一點(diǎn)就是在webpack.config.js文件里面，如果配置了output的publicPath這個(gè)字段的值的話，在index.html文件里面也應(yīng)該做出調(diào)整。因?yàn)?code>webpack-dev-server伺服的文件是相對(duì)publicPath這個(gè)路徑的。因此，如果你的webpack.config.js配置成這樣的：
module.exports = {
entry: './src/js/index.js',
output: {
path: './dist/js',
filename: 'bundle.js'，
publicPath: '/assets/'
}
}
那么，在index.html文件當(dāng)中引入的路徑也發(fā)生相應(yīng)的變化:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<script src="assets/bundle.js"></script>
</body>
</html>
如果在webpack.config.js里面沒有配置output的publicPath的話，那么index.html最后引入的文件js文件路徑應(yīng)該是下面這樣的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
Automatic Refresh
webpack-dev-server支持2種自動(dòng)刷新的方式：
- Iframe mode
- inline mode
這2種模式配置的方式和訪問的路徑稍微有點(diǎn)區(qū)別，最主要的區(qū)別還是Iframe mode是在網(wǎng)頁中嵌入了一個(gè)iframe，將我們自己的應(yīng)用注入到這個(gè)iframe當(dāng)中去，因此每次你修改的文件后，都是這個(gè)iframe進(jìn)行了reload。
通過查看webpack-dev-server的源碼，lib路徑下的Server.js文件，第38-48行，分別新建幾個(gè)流，這幾個(gè)流保存了client文件夾下的相關(guān)文件：
// Prepare live html page var livePage = this.livePage = new StreamCache(); fs.createReadStream(path.join(__dirname, "..", "client", "live.html")).pipe(livePage); // Prepare the live js file var liveJs = new StreamCache(); fs.createReadStream(path.join(__dirname, "..", "client", "live.bundle.js")).pipe(liveJs); // Prepare the inlined js file var inlinedJs = new StreamCache(); fs.createReadStream(path.join(__dirname, "..", "client", "index.bundle.js")).pipe(inlinedJs);
// Init express server
var app = this.app = new express();
// middleware for serving webpack bundle
this.middleware = webpackDevMiddleware(compiler, options);
app.get("/__webpack_dev_server__/live.bundle.js", function(req, res) {
res.setHeader("Content-Type", "application/javascript");
liveJs.pipe(res);
});
app.get("/webpack-dev-server.js", function(req, res) {
res.setHeader("Content-Type", "application/javascript");
inlinedJs.pipe(res);
});
app.get("/webpack-dev-server/*", function(req, res) {
res.setHeader("Content-Type", "text/html");
this.livePage.pipe(res);
}.bind(this));
當(dāng)使用Iframe mode時(shí)，請(qǐng)求/webpack-dev-server/index.html路徑時(shí)，會(huì)返回client/index.html文件，這個(gè)文件的內(nèi)容就是：
<!DOCTYPE html><html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/> <script type="text/javascript" charset="utf-8" src="/__webpack_dev_server__/live.bundle.js"> </script> </head> <body></body> </html>
這個(gè)頁面會(huì)請(qǐng)求live.bundle.js,其中里面會(huì)新建一個(gè)Iframe，你的應(yīng)用就被注入到了這個(gè)Iframe當(dāng)中。同時(shí)live.bundle.js中含有socket.io的client代碼，這樣它就能和webpack-dev-server建立的http server進(jìn)行websocket通訊了。并根據(jù)返回的信息完成相應(yīng)的動(dòng)作。
而Inline-mode，是webpack-dev-server會(huì)在你的webpack.config.js的入口配置文件中再添加一個(gè)入口,
module.exports = {
entry: {
app: [
'webpack-dev-server/client?http://localhost:8080/',
'./src/js/index.js'
]
},
output: {
path: './dist/js',
filename: 'bundle.js'
}
}
這樣就完成了將inlinedJS打包進(jìn)bundle.js里的功能，同時(shí)inlinedJS里面也包含了socket.io的client代碼，可以和webpack-dev-server進(jìn)行websocket通訊。
當(dāng)然你也可以直接在你index.html引入這部分代碼:
<script src="http://localhost:8080/webpack-dev-server.js"></script>
不過Iframe mode和Inline mode最后達(dá)到的效果都是一樣的，都是監(jiān)聽文件的變化，然后再將編譯后的文件推送到前端，完成頁面的reload的。
Iframe mode
Iframe mode下cmd line不需要添加其他的內(nèi)容，瀏覽器訪問的路徑是:localhost:8080/webpack-dev-server/index.html。
這個(gè)時(shí)候這個(gè)頁面的header部分會(huì)出現(xiàn)整個(gè)reload消息的狀態(tài)。當(dāng)時(shí)改變?cè)次募臅r(shí)候，即可以完成自動(dòng)編譯打包，頁面自動(dòng)刷新的功能。
Inline mode
使用inline mode的時(shí)候，cmd line需要寫成：
webpack-dev-server --inline --content-base ./dist
這個(gè)時(shí)候訪問的路徑是:localhost:8080/index.html
也能完成自動(dòng)編譯打包，頁面自動(dòng)刷新的功能。但是沒有的header部分的reload消息的顯示，不過在控制臺(tái)中會(huì)顯示reload的狀態(tài)。
Hot Module Replacement
開啟Hot Module Replacement功能，在cmd line里面添加--hot
webpack-dev-server --hot --inline --content-base ./dist
其他配置選項(xiàng)
- --quiet 控制臺(tái)中不輸出打包的信息
- --compress 開啟gzip壓縮
- --progress 顯示打包的進(jìn)度
還有一切其他的配置信息可以查閱官方文檔:
這是我的package.json的文件：
{
"name": "reptile",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist",
"build": "webpack --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.13.2",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.14.1"
}
}
首先命令行：輸入 npm install 所有依賴。然后輸入npm run dev。在瀏覽器中打開localhost:8080/index.html，然后就可以愉快的開發(fā)咯。
本地搭建API Server
如果你在本地還啟動(dòng)了一個(gè)api server,port為3000,這個(gè)server主要和你的前端應(yīng)用進(jìn)行數(shù)據(jù)交互。這個(gè)時(shí)候很顯然會(huì)出現(xiàn)跨域的問題，那么這個(gè)時(shí)候，你前端應(yīng)用的入口文件應(yīng)當(dāng)是用你自己?jiǎn)?dòng)的api server提供的。
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.send('xxx/xxx/index.html'); //這個(gè)地方填寫dist/index.html的路徑
})
此外webpack.config.js:
module.exports = {
entry: './src/js/index.js',
output: {
path: './dist/js',
filename: 'bundle.js',
publicPath: 'localhost:8080/dist'
},
devServer: {
'/get': {
targer: 'localhost:3000',
secure: false
}
}
}
將publicPath字段的內(nèi)容配置為絕對(duì)路徑。同時(shí)index.html文件中對(duì)js引用的路徑也改為絕對(duì)路徑
<script src="localhost:8080/dist/bundle.js"></script>
如果對(duì)web-dev-server還有其他問題的話，請(qǐng)留言告知。
另外2篇關(guān)于webpack的文章:
webpack1.x分包及異步加載套路
webpack2分包及異步加載套路
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序并沒有提供搖一搖API接口，但是提供了一個(gè)重力感應(yīng)的API，接下來我們可以用這個(gè)方法來模擬微信搖一搖功能，具體實(shí)現(xiàn)代碼，大家參考下本文2017-07-07
Use Word to Search for Files...2007-06-06
返回上一頁并自動(dòng)刷新，JavaScript一般的使用history.go(-1)和history.back()等,需要的朋友可以參考下2014-02-02
詳解javascript立即執(zhí)行函數(shù)表達(dá)式IIFE
本文主要介紹了javascript立即執(zhí)行函數(shù)表達(dá)式IIFE的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
回車換Tab 方便，實(shí)現(xiàn)tab功能，屏蔽回車提交2008-12-12
微信小程序scroll-view錨點(diǎn)鏈接滾動(dòng)跳轉(zhuǎn)功能
這篇文章主要介紹了微信小程序scroll-view錨點(diǎn)鏈接滾動(dòng)跳轉(zhuǎn)功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
html的DOM中document對(duì)象images集合用法實(shí)例
這篇文章主要介紹了html的DOM中document對(duì)象images集合用法,實(shí)例分析了images集合的語法與使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了js作用域和作用域鏈及預(yù)解析，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
放在head中的JS代碼會(huì)在頁面加載完成之前就讀取，而放在body中的JS代碼，會(huì)在整個(gè)頁面加載完成之后讀取2011-12-12
javascript js cookie的存儲(chǔ),獲取和刪除
2007-12-12