小編給大家分享一下webpack-dev-server的用法示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、網(wǎng)站建設(shè)、蘭陵網(wǎng)絡(luò)推廣、微信小程序開發(fā)、蘭陵網(wǎng)絡(luò)營銷、蘭陵企業(yè)策劃、蘭陵品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供蘭陵建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

記錄下webpack-dev-server的用法.

首先，我們來看看基本的webpack.config.js的寫法

 module.exports = {
    entry: './src/js/index.js',
    output: {
      path: './dist/js',
      filename: 'bundle.js'
    }
  }

配置文件提供一個入口和一個出口，webpack根據(jù)這個來進(jìn)行js的打包和編譯工作。雖然webpack提供了webpack --watch的命令來動態(tài)監(jiān)聽文件的改變并實時打包，輸出新bundle.js文件，這樣文件多了之后打包速度會很慢，此外這樣的打包的方式不能做到hot replace，即每次webpack編譯之后，你還需要手動刷新瀏覽器。

webpack-dev-server其中部分功能就能克服上面的2個問題。webpack-dev-server主要是啟動了一個使用express的Http服務(wù)器。它的作用主要是用來伺服資源文件。此外這個Http服務(wù)器和client使用了websocket通訊協(xié)議，原始文件作出改動后，webpack-dev-server會實時的編譯，但是最后的編譯的文件并沒有輸出到目標(biāo)文件夾，即上面配置的:

  output: {
    path: './dist/js',
    filename: 'bundle.js'
  }

注意：你啟動webpack-dev-server后，你在目標(biāo)文件夾中是看不到編譯后的文件的,實時編譯后的文件都保存到了內(nèi)存當(dāng)中。因此很多同學(xué)使用webpack-dev-server進(jìn)行開發(fā)的時候都看不到編譯后的文件

下面來結(jié)合webpack的文檔和webpack-dev-server里部分源碼來說明下如何使用：

啟動

啟動webpack-dev-server有2種方式：

• 通過cmd line

• 通過Node.js API

配置

我主要講解下cmd line的形式,Node.js API形式大家去看下官方文檔?？赏ㄟ^npm script進(jìn)行啟動。我的目錄結(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

這個時候還要注意的一點(diǎn)就是在webpack.config.js文件里面，如果配置了output的publicPath這個字段的值的話，在index.html文件里面也應(yīng)該做出調(diào)整。因為webpack-dev-server伺服的文件是相對publicPath這個路徑的。因此，如果你的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)的變化:

如果在webpack.config.js里面沒有配置output的publicPath的話，那么index.html最后引入的文件js文件路徑應(yīng)該是下面這樣的。

Automatic Refresh

webpack-dev-server支持2種自動刷新的方式：

• Iframe mode

• inline mode

這2種模式配置的方式和訪問的路徑稍微有點(diǎn)區(qū)別，最主要的區(qū)別還是Iframe mode是在網(wǎng)頁中嵌入了一個iframe，將我們自己的應(yīng)用注入到這個iframe當(dāng)中去，因此每次你修改的文件后，都是這個iframe進(jìn)行了reload。

通過查看webpack-dev-server的源碼，lib路徑下的Server.js文件，第38-48行，分別新建幾個流，這幾個流保存了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時，請求/webpack-dev-server/index.html路徑時，會返回client/index.html文件，這個文件的內(nèi)容就是：

這個頁面會請求live.bundle.js,其中里面會新建一個Iframe，你的應(yīng)用就被注入到了這個Iframe當(dāng)中。同時live.bundle.js中含有socket.io的client代碼，這樣它就能和webpack-dev-server建立的http server進(jìn)行websocket通訊了。并根據(jù)返回的信息完成相應(yīng)的動作。

而Inline-mode，是webpack-dev-server會在你的webpack.config.js的入口配置文件中再添加一個入口,

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里的功能，同時inlinedJS里面也包含了socket.io的client代碼，可以和webpack-dev-server進(jìn)行websocket通訊。

當(dāng)然你也可以直接在你index.html引入這部分代碼:

不過Iframe mode和Inline mode最后達(dá)到的效果都是一樣的，都是監(jiān)聽文件的變化，然后再將編譯后的文件推送到前端，完成頁面的reload的。

Iframe mode

Iframe mode下cmd line不需要添加其他的內(nèi)容，瀏覽器訪問的路徑是:localhost:8080/webpack-dev-server/index.html。

這個時候這個頁面的header部分會出現(xiàn)整個reload消息的狀態(tài)。當(dāng)時改變源文件的時候，即可以完成自動編譯打包，頁面自動刷新的功能。

Inline mode

使用inline mode的時候，cmd line需要寫成：

webpack-dev-server --inline --content-base ./dist

這個時候訪問的路徑是:localhost:8080/index.html

也能完成自動編譯打包，頁面自動刷新的功能。但是沒有的header部分的reload消息的顯示，不過在控制臺中會顯示reload的狀態(tài)。

Hot Module Replacement

開啟Hot Module Replacement功能，在cmd line里面添加--hot

webpack-dev-server --hot --inline --content-base ./dist

其他配置選項

• --quiet 控制臺中不輸出打包的信息

• --compress 開啟gzip壓縮

• --progress 顯示打包的進(jìn)度

還有一切其他的配置信息可以查閱官方文檔:

webpack-dev-server-cli

這是我的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

如果你在本地還啟動了一個api server,port為3000,這個server主要和你的前端應(yīng)用進(jìn)行數(shù)據(jù)交互。這個時候很顯然會出現(xiàn)跨域的問題，那么這個時候，你前端應(yīng)用的入口文件應(yīng)當(dāng)是用你自己啟動的api server提供的。

 var express = require('express');
  var app = express();
  
  app.get('/', function(req, res) {
    res.send('xxx/xxx/index.html'); //這個地方填寫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)容配置為絕對路徑。同時index.html文件中對js引用的路徑也改為絕對路徑

以上是“webpack-dev-server的用法示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！