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)


最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。
  • 25
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值