MiThink 记事本

webpack提供了几种方式，进行热加载，在开发模式中，我们使用这种方式来提高效率，这里要介绍的，是使用 webpack-dev-middleware中间件和webpack-hot-middleware中间件(我没有使用)，首先安装webpack-dev-middleware中间件：

npm install webpack-dev-middleware --save-dev

另外，还要安装express，这是一个nodejs框架

npm install express --save-dev

在开始之前，我先简单介绍一下这个中间件，之所以叫做中间件，是因为nodejs的一个叫做express的框架中有中间件的概念，而这两个包要作为express中间件使用，所以称它们为中间件，那么他们能干什么呢？

webpack-dev-middleware

我们之前所面临的问题是，如果我们的代码改动了，我们要想看到浏览器的变化，需要先对项目进行构建，然后才能查看效果，这样对于开发效率来讲，简直就是不可忍受的一件事，试想我仅仅修改一个背景颜色就要构建一下项目，这尼玛坑爹啊，好在有webpack-dev-middleware中间件，它是对webpack一个简单的包装，它可以通过连接服务器服务那些从webpack发射出来的文件，它有一下几点好处：

1、不会向硬盘写文件，而是在内存中，注意我们构建项目实际就是向硬盘写文件。

2、当文件改变的时候，这个中间件不会再服务旧的包，你可以直接帅新浏览器就能看到最新的效果，这样你就不必等待构建的时间，所见即所得。

下面我们在build目录中创建一个 dev-server.js 的文件，并写入一下内容：

// 引入必要的模块
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.config.dev')

// 创建一个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 http://localhost:8888')
})

这里的webpack配置我引用得是开发环境的文件webpack.config.dev.js，生产环境的配置文件是webpack.config.js。

有两处需要修改：

1. 将 config.output.publicPath 修改为 '/'；
2. 将 plugins 中 HtmlWebpackPlugin 中的 filename 修改为 'output/index.html'；

接下来，我们在项目根目录运行下面的命令，开启服务：

node build/dev-server.js

如果看到下图所示，证明你的服务成功开启了：

访问http://localhost:8888/output/index.html可以看看效果了！