vue-cli脚手架npm相关文件解读(7)dev-server.js
系列文章传送门:
下面是build/dev-server.js中相关代码和配置的说明
项目地址:https://github.com/SmileSmith(感觉不错的话帮忙打个星哈 ~)
/* * npm run dev 调试执行文件,主要用于开发环境 * 建议先查阅webapck.dev.conf.js ../config/index.js */ // npm和node版本检查 require('./check-versions')() 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) } var opn = require('opn') // opn插件是用来打开特定终端的,此文件用来在默认浏览器中打开链接 opn(url) var path = require('path') var express = require('express') // nodejs开发框架express,用来简化操作,可以当做一个功能强大的http-server var webpack = require('webpack') var proxyMiddleware = require('http-proxy-middleware') // http中间代理插件,此插件是用来代理请求的只能用于开发环境,目的主要是解决跨域请求后台api var webpackConfig = process.env.NODE_ENV === 'testing' ? require('./webpack.prod.conf') : require('./webpack.dev.conf') // default port where dev server listens for incoming traffic // 下面是express监听的端口号,因为没有设置process.env.PORT,所以下面监听的就是config.dev.port即8080 // 需要自定义设置端口号,可以修改根目录下的package.json中的dev脚本,加上 set PORT=端口号&& var port = process.env.PORT || config.dev.port // automatically open browser, if not set will be false // 默认打开浏览器,!!强制转成Boolean值,防止后续用到这个变量的地方可能出问题 var autoOpenBrowser = !!config.dev.autoOpenBrowser // Define HTTP proxies to your custom API backend // https://github.com/chimurai/http-proxy-middleware // 配置反向代理的配置数据 var proxyTable = config.dev.proxyTable // 创建express实例 var app = express() // ※※※ Use express.Router to mock api by SmileSmith ※※※ // ※※※ 用express的router方法来mock发布一些资源 ※※※ var mockRoutes = express.Router() mockRoutes.post('/getCurrentPeroid', function (req, res) { res.json({ errno: 0 , data: require('../mock/data.currentperoid.json') }); }) app.use('/api', mockRoutes) //api开头的请求用mock数据返回 // 把配置参数传递到webpack方法中,返回一个编译对象,这个编译对象上面有很多属性,建议看webpack官方文档 // 这里主要是用到里面的状态函数 如compilation,compile,after-emit这类的 var compiler = webpack(webpackConfig) // 下面是webpack-dev-middleware和webpack-hot-middleware两兄弟,这两个是黄金组合 var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, // 以webpack编译后的内容处理发布地址(/)的请求 quiet: true // 使用friendly-errors-webpack-plugin插件这个必须设置为true,具体看wepback-dev-config.js }) var hotMiddleware = require('webpack-hot-middleware')(compiler, { log: () => {} }) // force page reload when html-webpack-plugin template changes compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { // webpack任何插件都可以使用这种方式,里面可以传递钩子函数,用来在插件各个阶段做特殊处理,钩子函数种类很多 hotMiddleware.publish({ action: 'reload' }) // 当插件html-webpack-plugin产出完成之后,强制刷新浏览器 cb() }) }) // proxy api requests // 下面是代理表的处理方法,请关注../config/index.js中开发环境proxyTab中的配置 Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === 'string') { options = { target: options } } app.use(proxyMiddleware(options.filter || context, options)) }) // handle fallback for HTML5 history API // 使用H5的history来做返回,而不是浏览器url // 用来解决单页面应用,点击刷新按钮和通过其他search值定位页面的404错误 app.use(require('connect-history-api-fallback')()) // serve webpack bundle output // 让express用上webpack输出的模块中间件 app.use(devMiddleware) // enable hot-reload and state-preserving // compilation error display // 让express用上webpack输出的热加载中间件 app.use(hotMiddleware) // serve pure static assets // 让express用上webpack输出在static中的静态文件 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) app.use(staticPath, express.static('./static')) var uri = 'http://localhost:' + port // 这个port上面提到,默认8080 //定义一个Promise用于返回,定义一个_resolve用于编译完成时的回调里面调用 var _resolve var readyPromise = new Promise(resolve => { _resolve = resolve }) console.log('> Starting dev server...') // 等待模块编译完成就可以打开浏览器 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() // readyPromise就可以返回resolve }) // node.js监听端口 var server = app.listen(port) module.exports = { ready: readyPromise, // (其它人)调用ready(),就能拿到一个promise对象 close: () => { server.close() } }
参考:http://www.cnblogs.com/ye-hcj/archive/2017/06.html
vue-cli脚手架npm相关文件解读(7)dev-server.js的更多相关文章
- vue-cli脚手架npm相关文件解读(4)utils.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(9)config/index.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(8)check-versions.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(6)build.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(5)vue-loader.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(3)webpack.dev.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(2)webpack.prod.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(1)webpack.base.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
随机推荐
- Ubuntu tty中文字符乱码
默认的tty只能显示一个字节,我们可以用setfont命令去改tty字体,但仅仅局限在一个字节内,不支持UTF-8多字节,所以我们就没办法使用汉字.但是我们可以使用FbTerm啊!FbTerm是支持中 ...
- 原生JSdom节点相关(非原创)
节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...
- centos7 ssh免密码登录
单机测试 1,设置/etc/hosts 添加主机及ip 2,修改/etc/sysconfig/network NETWORKING=yesNETWORING_IPV6=yesHOSTNAME=mast ...
- Selenium对浏览器支持的版本
最新的selenium与几种常用浏览器的版本兼容情况: selenium 3.4.0 : Mozilla GeckoDriver 0.18 -- Firefox 53 - 56 Google Ch ...
- log4j(一)——为什么要用log4j?
一:试验环境 OS:win7 JDK:jdk7 Log4j:1.2.17(好尴尬,原本是想试验下log4j2的,结果阴差阳错用了这个版本,不过幸好,试验也不白试验,试验的作用是一样的) 二:先看两个简 ...
- 【php】php 连接数据库
$mysql_server_name=""; //数据库服务器名称 $mysql_username=""; // 连接数据库用户名 $mysql_passwor ...
- centos6.8 静默安装 oracle 11.2.0.4
安装环境及系统要求 (下文具体参数值与路径根据自己的环境调整)操作系统:Red Hat Enterprise Linux 6 (x86) 或者CentOS 6 (x64) 数据库:Oracle ...
- Java中的24种设计模式与7大原则 (转)
一.创建型模式 1.抽象工厂模式(Abstract factory pattern): 提供一个接口, 用于创建相关或依赖对象的家族, 而不需要指定具体类.2.生成器模式(Builder patter ...
- Qt5.5.1和Qt5.3.2编译OCI驱动教程及验证方法
我们都知道oracle数据库的强大,并且好多企业或者教学用到数据库时都会推荐使用.但是Qt因为版权问题没有封装oracle数据库专用驱动,网上也有一大堆说法和教程,但是或多或少的都有问题.下面废话不多 ...
- 8. leetcode 485. Max Consecutive Ones
Given a binary array, find the maximum number of consecutive 1s in this array. Example 1: Input: [1, ...