// 引入必要的模块 var express = require('express') var webpack = require('webpack') var config = require('./webpack.config') // 创建一个express实例 var app = express() // 调用webpack并把配置传递过去 var compiler = webpack(config) // 使用 webpack-dev-middleware 中间件 var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: config.output.publicPath, stats: { colors: true, chunks: false } }) // 注册中间件 app.use(devMiddleware) // 监听 8888端口，开启服务器 app.listen(8888, function (err) { if (err) { console.log(err) return } console.log('Listening at :8888') })
此时，我们在项目根目录运行下面的命令，开启服务：
node build/dev-server.js
如果看到下图所示，证明你的服务成功开启了：
接下来打开浏览器，输入： :8888/app/index/index.html
回车，如果不出意外，你应该得到一个404，如下图：
我们要对我们的 webpack.config.js 配置文件做两处修改：
1、将 config.output.publicPath 修改为 ‘/‘：
output: { // 输出路径是 myProject/output/static path: path.resolve(__dirname, '../output/static'), publicPath: 'https://www.jb51.net/', filename: '[name].[hash].js', chunkFilename: '[id].[chunkhash].js' },
2、将 plugins 中 HtmlWebpackPlugin 中的 filename 修改为 ‘app/index/index.html'
plugins: [ new HtmlWebpackPlugin({ filename: 'app/index/index.html', template: path.resolve(__dirname, '../app/index/index.html'), inject: true }) ]
重启服务，再刷新页面，如果看到如下界面，证明你成功了：
但是这样开发模式下的确是成功了，可是我们直接修改了 webpack.config.js 文件，这就意味着当我们执行 构建命令 的时候，配置变了，那么我们的构建也跟着变了，所以，一个好的方式是，不去修改webpack.config.js文件，我们在build目录下新建一个 webpack.dev.conf.js文件，意思是开发模式下要读取的配置文件，并写入一下内容：
var HtmlWebpackPlugin = require('html-webpack-plugin') var path = require('path'); // 引入基本配置 var config = require('./webpack.config'); config.output.publicPath = 'https://www.jb51.net/'; config.plugins = [ new HtmlWebpackPlugin({ filename: 'app/index/index.html', template: path.resolve(__dirname, '../app/index/index.html'), inject: true }) ]; module.exports = config;
这样，我们在dev环境下的配置文件中覆盖了基本配置文件，我们只需要在dev-server.js中将
var config = require('./webpack.config')
修改为：
var config = require('./webpack.dev.conf')
即可，然后，重启服务，刷新浏览器，你应该得到同样的成功结果，而这一次当我们执行构建命令：
webpack --display-modules --display-chunks --config build/webpack.config.js
并不会影响构建输出，因为我们没有直接修改webpack.config.js文件。
现在我们已经使用 webpack-dev-middleware 搭建基本的开发环境了，但是我们并不满足，因为我们每次都要手动去刷新浏览器，所谓的热加载，意思就是说能够追踪我们代码的变化，并自动更新界面，甚至还能保留程序状态。要完成热加载，我们就需要使用另外一个中间件 webpack-hot-middleware
2、webpack-hot-middleware
webpack-hot-middleware 只配合 webpack-dev-middleware 使用，它能给你提供热加载。
它的使用很简单，总共分4步：
1、安装，我们上面已经安装过了
2、在 webpack.dev.conf.js 配置文件中添加三个插件，如下：
var HtmlWebpackPlugin = require('html-webpack-plugin') var path = require('path'); var webpack = require('webpack'); // 引入基本配置 var config = require('./webpack.config'); config.output.publicPath = 'https://www.jb51.net/'; config.plugins = [ // 添加三个插件 new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new HtmlWebpackPlugin({ filename: 'app/index/index.html', template: path.resolve(__dirname, '../app/index/index.html'), inject: true }) ]; module.exports = config;
3、在 webpack.config.js 文件中入口配置中添加 ‘webpack-hot-middleware/client'，如下：
复制代码 代码如下:
entry: ['webpack-hot-middleware/client', path.resolve(__dirname, '../app/index/index.js')],
4、在 dev-server.js 文件中使用插件