Vue进阶（五十四）：vue-cli 脚手架 dev-server

var webpack = require(‘webpack’)
// 引入http-proxy-middleware插件，此插件是用来代理请求的，只能用于开发环境，目的主要是解决跨域请求后台api
var proxyMiddleware = require(‘http-proxy-middleware’)
// 下面的意思是指，如果不是testing环境就引入webpack.dev.conf.js配置文件
// 关于webpack.dev.conf.js配置文件请关注我的相关文章，建议现在就去看，否则后面看着吃力
var webpackConfig = process.env.NODE_ENV === ‘testing’ ?
require(‘./webpack.prod.conf’) :
require(‘./webpack.dev.conf’)

// default port where dev server listens for incoming traffic
// 下面是webpack-dev-server 监听的端口号，因为没有设置process.env.PORT，所以下面监听的就是config.dev.port即8080
var port = process.env.PORT || config.dev.port
// automatically open browser, if not set will be false
// 下面是true,至于为啥，本来就是true还要加!!两个感叹号，估计是vue作者装了个逼吧
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
// 下面是解决开发环境跨域问题的插件，我在config目录index.js文章中有介绍，自行查看
var proxyTable = config.dev.proxyTable
// 下面是创建node.js的express开发框架的实例，别问我为什么这样，自己看node.js去吧
var app = express()
// 把配置参数传递到webpack方法中，返回一个编译对象，这个编译对象上面有很多属性，自己去看吧，主要是用到里面的状态函数 如compilation，compile，after-emit这类的
var compiler = webpack(webpackConfig)
// 下面是webpack-dev-middleware和webpack-hot-middleware两兄弟，这两个是黄金组合
// 而vue作者用这两个插件也是用的最基本的形式，详情看(1) (2)
var devMiddleware = require(‘webpack-dev-middleware’)(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true // 使用friendly-errors-webpack-plugin插件这个必须设置为true，具体看我的wepback-dev-config.js
})

var hotMiddleware = require(‘webpack-hot-middleware’)(compiler, {
log: () => {} // 使用friendly-errors-webpack-plugin插件这个必须设置为true，具体看我的wepback-dev-config.js
})
// force page reload when html-webpack-plugin template changes
compiler.plugin(‘compilation’, function(compilation) {
// webpack任何一个插件都plugin这个方法，里面可以传递钩子函数，用来在插件各个阶段做特殊处理，钩子函数种类很多
compilation.plugin(‘html-webpack-plugin-after-emit’, function(data, cb) {
// 当插件html-webpack-plugin产出完成之后，强制刷新浏览器
hotMiddleware.publish({ action: ‘reload’ })
cb()
})
})

// proxy api requests
Object.keys(proxyTable).forEach(function(context) {
// 下面是代理表的处理方法，看看就行了，几乎用不上，除非你是全栈，不用webpack-dev-server，使用后台语言做服务器
var options = proxyTable[context]
if (typeof options === ‘string’) {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})

// handle fallback for HTML5 history API
// 这个插件是用来解决单页面应用，点击刷新按钮和通过其他search值定位页面的404错误
// 详情请看(3)
app.use(require(‘connect-history-api-fallback’)())

// serve webpack bundle output
// app.use是在响应请求之前执行的，用来指定静态路径，挂载静态资源
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)

// serve pure static assets
// 下面的staticPath是 static ，path.posix.join其他配置文件中我已经介绍了，这里不再赘述
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// 挂载静态资源，下面的方法是用虚拟目录来访问资源，staticPath就是虚拟目录路径，其实不管设不设置都是static
app.use(staticPath, express.static(‘./static’))
// 下面结果就是 ‘http://localhost:8080’
var uri = ‘http://localhost:’ + port

// 下面是es6的promise规范，用来处理嵌套请求的
var _resolve
var readyPromise = new Promise(resolve => {
_resolve = resolve // resolve是一个回调函数专门用来传递成功请求的数据
})
// 下面是加载动画
console.log(‘> Starting dev server…’)
// waitUntilValid是webpack-dev-middleware实例的方法，在编译成功之后调用
devMiddleware.waitUntilValid(() => {
console.log('> Listening at ’ + uri + ‘\n’)
// when env is testing, don’t need open it
// 测试环境不打开浏览器
if (autoOpenBrowser && process.env.NODE_ENV !== ‘testing’) {
opn(uri)
}
_resolve() // 这里没有传递数据，只是在模拟
})
// node.js监听端口
var server = app.listen(port)
// 这个导出对象是用来对外提供操作服务器和接受数据的接口，vue作者可谓考虑颇深啊
module.exports = {
ready: readyPromise, // promise实例，可以通过readyPromise.then收到数据
close: () => {
server.close() // 关闭服务器
}
}

### 二、webpack-dev-middleware 插件


这个插件只能用于开发环境，下面是关于这个插件的解释。


这是一个简洁的`webpack`包装中间件，这个插件主要为文件做一件事情，就是当文件修改后提交到`webpack`服务器，然后处理这些修改后的文件。


这个插件有一下几个优点


* 第一，所有的文件都是写在`disk`上，文件处理在内存中进行；
* 第二，如果文件在`watch`模式下被改动，这个中间件将不会为这些老的`bundle`服务了，如果这些老的`bundle`上有文件改动，这个中间件将不会发送请求，而是等到当前编译结束，当前最新的文件有改动，才会发送请求，所以不需要手动刷新。


这个中间件是`webpack-dev-server`的核心，实现修改文件后`webapack`自动刷新的功能。


**安装**

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

使用方法如下，下面的使用方法也是`webpack-dev-server`实现的代码。

var webpackMiddleware = require(“webpack-dev-middleware”);
app.use(webpackMiddleware(webpack({obj1}),{obj2}))

`app.use`是`express`的方法，用来设置静态路径。


上面的obj1是`webpack`配置对象，使用`webpack`方法转换成`compiler`编译对象，obj2配置的是更新文件打包后的配置，使用`webpackMiddleware`处理之后，返回一个静态路径，方便获取文件关于obj2的配置项，可以自行查阅，必须要添加`publicPath`。


`Vue`项目静态服务器是`node.js`，`webpack-dev-middleware`将修改的文件编译后，告诉`nodejs`服务器哪些文件发生了修改，并且把最新的文件上传到静态服务器。


### 三、webpack-hot-middleware 插件


这个插件是用来将`webpack-dev-middleware`编译更新后的文件通知浏览器，并且告诉浏览器如何更新文件，从而实现 `Webpack hot reloading`。


将这两个插件配合起来使用就可以不需要`webpack-dev-sever`，可以自己实现`hot-replacement`热替换功能，`webpack-hot-middleware`插件通知浏览器更新文件大致是通过一个`json`对象实现的，具体实现机制这里不多说了，下面来看具体用法。


**安装**

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

### 刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。



* **前端字节跳动真题解析**  

  ![](https://img-blog.csdnimg.cn/img_convert/8d27500df7b25342f252bca635ca0ab3.png)

* **【269页】前端大厂面试题宝典**  

  ![](https://img-blog.csdnimg.cn/img_convert/eac3322374bd31596de9bf548f6ce47f.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。