# 一、几种开发工具

每次要编译代码时，手动运行 npm run build 就会变得很麻烦。

不知道你有没有使用过类似于vue-cli这样的脚手架工具, 在使用它们的时候, 每次只要执行npm run start这样的指令就可以创建一个本地的web服务器, 然后打开一个例如localhost:8080这样的端口页面, 同时还有热更新等功能.

其实这些功能的实现都是vue-cli内部使用了webpack.

webpack中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码.

# webpack’s Watch Mode(观察者模式)

观察者模式, 只需要在package.json里配置一个脚本命令:

"scripts": {
	"watch": "webpack --watch"
}

使用npm run watch命令之后, 会看到编译过程, 但是不会退出命令行, 而是实时监控文件.

比如你在重新修改了本地的代码并保存后, 它会重新进行编译, 不需要我们手动再执行编译指令, 缺点是你需要手动刷新页面才能看到更改效果.

(--watch也可以简写为-w)

# webpack-dev-server

使用webpack-dev-server会为你提供一个简单的web服务器, 它的作用就是监听文件的改变并自动编译, 同时会自动刷新页面. 比观察者模式厉害.

使用步骤:

• 安装: $ npm i --save-dev webpack-dev-server
• 添加脚本命令: "start": "webpack-dev-server --open"

使用此指令效果:

不会生成dist文件夹, 而是开启了一个本地的web服务器localhost:8080

每次修改了本地代码之后, 都会重新自动编译, 并刷新页面

其它配置项:

webpack-dev-server也有很多配置项能在webpack.config.js中配置

只需要在devServer里进行配置, 例如:

module.exports = {
    devServer: {
        contentBase: './dist', // 告诉服务器从哪里提供内容
        host: '0.0.0.0', // 默认是 localhost
        port: 8000, // 端口号, 默认是8080
        open: true, // 是否自动打开浏览器
        hot: true, // 启用 webpack 的模块热替换特性
        hotOnly: true // 当编译失败之后不进行热更新
    }
}

如果你使用了这个功能之后, 你就会发现, 它就有点vue-cli的样子了.

更多关于devServer的配置可以查看这里: 开发中Server。

# webpack-dev-middleware

# 基本使用

webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处