<!DOCTYPE html><html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta charset="utf-8"/> <meta 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="https://www.jb51.net/__webpack_dev_server__/live.bundle.js"> </script> </head> <body></body> </html>
这个页面会请求live.bundle.js,其中里面会新建一个Iframe，你的应用就被注入到了这个Iframe当中。同时live.bundle.js中含有socket.io的client代码，这样它就能和webpack-dev-server建立的http server进行websocket通讯了。并根据返回的信息完成相应的动作。
而Inline-mode，是webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口,
module.exports = { entry: { app: [ 'webpack-dev-server/client?:8080/', './src/js/index.js' ] }, output: { path: './dist/js', filename: 'https://www.jb51.net/bundle.js' } }
这样就完成了将inlinedJS打包进bundle.js里的功能，同时inlinedJS里面也包含了socket.io的client代码，可以和webpack-dev-server进行websocket通讯。
当然你也可以直接在你index.html引入这部分代码:
<script src="https://localhost:8080/webpack-dev-server.js"></script>
不过Iframe mode和Inline mode最后达到的效果都是一样的，都是监听文件的变化，然后再将编译后的文件推送到前端，完成页面的reload的。
Iframe mode
Iframe mode下cmd line不需要添加其他的内容，浏览器访问的路径是:localhost:8080/webpack-dev-server/index.html。
这个时候这个页面的header部分会出现整个reload消息的状态。当时改变源文件的时候，即可以完成自动编译打包，页面自动刷新的功能。
Inline mode
使用inline mode的时候，cmd line需要写成：
webpack-dev-server --inline --content-base ./dist
这个时候访问的路径是:localhost:8080/index.html
也能完成自动编译打包，页面自动刷新的功能。但是没有的header部分的reload消息的显示，不过在控制台中会显示reload的状态。
Hot Module Replacement
开启Hot Module Replacement功能，在cmd line里面添加--hot
webpack-dev-server --hot --inline --content-base ./dist
其他配置选项
--quiet 控制台中不输出打包的信息
--compress 开启gzip压缩
--progress 显示打包的进度
还有一切其他的配置信息可以查阅官方文档:
这是我的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，然后就可以愉快的开发咯。
本地搭建API Server
如果你在本地还启动了一个api server,port为3000,这个server主要和你的前端应用进行数据交互。这个时候很显然会出现跨域的问题，那么这个时候，你前端应用的入口文件应当是用你自己启动的api server提供的。
var express = require('express'); var app = express(); app.get('https://www.jb51.net/', 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: 'https://www.jb51.net/bundle.js', publicPath: 'localhost:8080/dist' }, devServer: { '/get': { targer: 'localhost:3000', secure: false } } }
将publicPath字段的内容配置为绝对路径。同时index.html文件中对js引用的路径也改为绝对路径
<script src="https://www.jb51.net/localhost:8080/dist/bundle.js"></script>
如果对web-dev-server还有其他问题的话，请留言告知。
另外2篇关于webpack的文章: