详解vue-cli脚手架build目录中的dev-server.js配置文件


Posted in Javascript onNovember 24, 2017

本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件

1.这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境

2.由于这是一个系统的配置文件,将涉及很多的模块和插件,所以这部分内容我将分多个文章讲解,请关注我博客的其他文章

3.关于注释 •当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看

4.上代码

// 导入check-versions.js文件,并且执行导入的函数,用来确定当前环境node和npm版本是否符合要求
// 关于check-versions请查看我博客check-versions的相关文章
require('./check-versions')()
// 导入config目录下的index.js配置文件,此配置文件中定义了生产和开发环境中所要用到的一些参数
// 关于index.js的文件解释请看我博客的index.js的相关文章
var config = require('../config')
// 下面表示如果如果没有定义全局变量NODE_ENV,则将NODE_ENV设置为"development"
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
// opn插件是用来打开特定终端的,此文件用来在默认浏览器中打开链接 opn(url)
var opn = require('opn')
// nodejs路径模块
var path = require('path')
// nodejs开发框架express,用来简化操作,有兴趣可以自行去了解
var express = require('express')
// 引入webpack模块,用来使用webpack内置插件
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() // 关闭服务器
  }
}

解释

(1)webpack-dev-middleware插件

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

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

这个插件有一下几个优点

第一,所有的文件都是写在disk上,文件的处理在内存中进行

第二,如果文件在watch模式下被改动,这个中间件将不会为这些老的bundle服务了,如果这些老的bundle上有文件改动, 这个中间件将不会发送请求,而是等到当前编译结束,当前最新的文件有改动,才会发送请求,所以你不需要手动刷新了

第三,我会在以后的版本中优化

总结,这个中间件是webpack-dev-server的核心,实现修改文件,webapack自动刷新的功能

安装 npm install webpack-deb-middleware --save-dev

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

var webpackMiddleware = require("webpack-deb-middleware");
app.use(webpackMiddleware(webpack({obj1}),{obj2}))

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

上面的obj1是webpack配置对象,使用webpack方法转换成compiler编译对象,obj2配置的是更新文件打包后的配置,使用

webpackMiddleware处理之后,就返回一个静态路径,方便获取文件关于obj2的配置项,可以自行查阅,必须要添加publicPath

说到这里,我就不卖关子了,简言之我们的静态服务器是node.js,现在文件修改了,webpack-dev-middleware将修改的文件编译后,告诉nodejs服务器哪些文件修改了并且把最新的文件上传到静态服务器,够清楚了吧

(2)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

在使用了webpack-dev-middleware之后,在添加如下代码即可

app.use(require("webpack-hot-middleware")(compiler));

(3)connect-history-api-fallback插件

因为在开发单页面应用时,总的来说项目就一个页面,如果通过点击刷新按钮并且此时链接指的不是主页的地址,就会404;或者我通过其他的链接比如 /login.html 但是并没有login.html就会报错,而这个插件的作用就是当有不正当的操作导致404的情况,就把页面定位到默认的index.html使用起来也比较简单,记住这样用就可以了

安装 npm install --save connect-history-api-fallback

使用

var history = require('connect-history-api-fallback');
  var express = require('express');
  var app = express();
  app.use(history());

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
用vue设计一个日历表
Dec 03 Vue.js
javaScript和jQuery自动加载简单代码实现方法
Nov 24 #jQuery
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 #Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 #Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 #Javascript
vue 文件目录结构详解
Nov 24 #Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 #Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 #Javascript
You might like
PHP 变量类型的强制转换
2009/10/23 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
浅谈php扩展imagick
2014/06/02 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP引用返回用法示例
2016/05/28 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python中操作MySQL入门实例
2015/02/08 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python生成ppt的方法
2018/06/07 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
绩效考核实施方案
2014/03/18 职场文书
保护环境倡议书500字
2014/05/19 职场文书
求职自我评价范文
2015/03/09 职场文书
简历中自我评价范文
2015/03/11 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书