vue-cli的webpack模版项目配置解析-build/dev-server.js
我们在使用vue-cli搭建vuejs项目(Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目)的时候,会自动生成一系列文件,其中就包含webpack配置文件。我们现在来看下,这些配置到底是什么意思,对我们开发过程中有什么影响。
项目搭建好了, 使用Bash运行npm run dev
, 然后Bash界面会打印出一些东西,之后默认浏览器就打开了一个页面。为什么会有这些动作呢?我们从package.json
开始看。
// package.json
{
...
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e"
},
...
}
运行npm run dev
其实是执行了 build/dev-server.js
文件。
那我们现在先分析这个文件,直接上源码。
// dev-server.js
// 调用check-versions.js 模块,检查版本node和npm的版本
require('./check-versions')()
// 获取配置
var config = require('../config')
// 如果Node的环境变量中没有设置当前的环境(NODE_ENV), 则使用config中配置的环境作为当前环境
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
// opn模块,使用默认应用程序,打开网址、文件、 可执行程序等内容的一个插件。
// 例如,使用默认浏览器打开urls。跨平台可用。
// 这里用它来调用默认浏览器打开dev-server监听的端口,例如: localhost:8080
var opn = require('opn')
// path模块提供用于处理文件和目录路径的实用程序。
var path = require('path')
// 引入express 模块
var express = require('express')
// 引入 webpack模块
var webpack = require('webpack')
// 一个express中间件,用于将http请求代理到其他服务器
// 例:localhost:8080/api/xxx --> localhost:3000/api/xxx
// 这里使用该插件可以将前端开发中涉及到的请求代理到API服务器上,方便与服务器对接
var proxyMiddleware = require('http-proxy-middleware')
// 根据 Node 环境来引入相应的 webpack 配置
// 这里用 "testing" 来判断Node环境, 是因为在两个webpack.***.conf中还会有判断
var webpackConfig = process.env.NODE_ENV === 'testing'
? require('./webpack.prod.conf')
: require('./webpack.dev.conf')
// dev-server 监听的端口,默认为config.dev.port设置的端口,即8080
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
// 用于判断是否要自动打开浏览器的布尔变量,
// 当配置文件中没有设置自动打开浏览器的时候其值为 false
// `!!`是一个逻辑操作,表示强制转换类型。这里强制转换为`bool`类型
// automatically open browser, if not set will be false
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// 定义HTTP代理,到自定义API接口
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable
// 创建一个express实例
var app = express()
// 根据webpack配置文件创建Compiler对象
var compiler = webpack(webpackConfig)
// 引入webpack开发中间件, 此插件只在开发环境中有用。
// 使用compiler对象来对相应的文件进行编译和绑定
// 编译绑定后将得到的产物存放在内存中而没有写进磁盘
// 将这个中间件交给express使用之后即可访问这些编译后的产品文件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
//绑定中间件到publicpath中,使用方法和在webpack中相同
publicPath: webpackConfig.output.publicPath,
quiet: true // 允许在console控制台显示 警告 和 错误 信息
})
// 引入热重载功能的中间件。
// Webpack热重载仅使用webpack-dev-middleware开发中间件。
// 这个中间件,允许您在没有webpack-dev-server的情况下,将热重载功能到现有服务器中。
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
// 用于打印行的功能
log: () => {}
})
// 当html-webpack-plugin 提交之后通过热重载中间件发布重载动作使得页面重载
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
// 将 proxyTable 中的代理请求配置挂在express服务器上
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
// connect-history-api-fallback 模块,通过指定的索引页来代理请求的中间件,对于使用HTML5历史API的单个页面应用程序非常有用。
// 处理 HTML5历史api回退的问题
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())
// 为webpack打包输出服务
// serve webpack bundle output
app.use(devMiddleware)
// 热重载和状态保留功能
// 显示编译错误信息
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)
// posix属性提供了对路径方法的POSIX特定实现的访问。
// 服务纯静态资源。 利用Express托管静态文件,使其可以作为资源访问
// 想要访问static文件夹下的资源,必须添加 staticPath 返回的地址作为上一级地址。
// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
// 应用启动时候的访问地址信息,例如 http://localhost:8080
var uri = 'http://localhost:' + port
// 异步回调
var _resolve
var readyPromise = new Promise(resolve => {
_resolve = resolve
})
console.log('> Starting dev server...')
// 如果webpack开发中间件有效执行,那么执行后面的回调函数。
devMiddleware.waitUntilValid(() => {
console.log('> Listening at ' + uri + '\n')
// 如果是 testing 环境, 不需要打开浏览器
// when env is testing, don't need open it
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
_resolve()
})
// 启动express服务器并监听相应的端口(8080)
var server = app.listen(port)
// 模块导出。
// 1:执行异步函数
// 2:提供close方法,关闭服务器
module.exports = {
ready: readyPromise,
close: () => {
server.close()
}
}
以上,就是我对这个文件的解析。
后续再对其他文件解析...欢迎关注
vue-cli的webpack模版项目配置解析-build/dev-server.js的更多相关文章
- vue-cli的webpack模版项目配置解析
上一篇文章已经分析了build/dev-server.js,里面使用到了其他config文件. 那么我们这篇文章,按着dev-server.js的使用顺序,来分析下其他文件. 首选,调用check-v ...
- 解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...
- Vue Cli 3:创建项目
一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大
从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...
- golang 开源项目: 配置解析模块--config
在golang中,配置文件经常使用json格式.json格式的语法,有些繁琐,尤其是出现嵌套的时候,每一块都需要大括号包裹,看起来很臃肿. 本着简单易用的原则,个人开发了一个配置解析模块config, ...
- Vue CLI 3开发中屏蔽的EsLint错误 (.eslintrc.js 在vue3+中 修改这个)
1.关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校 ...
- 让我们用Vue cli全家桶搭建项目
一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...
随机推荐
- Java UDP实现聊天功能代码
我以前经常写的是基于TCP的网络编程,由于TCP建立连接鼻血要经过三次握手连接,服务器端需要阻塞式等待客户端的连接.而UDP则是可以直接向目的地址的目的端口上发送数据包,由于它只负责发送出去就好,不管 ...
- Spark监控官方文档学习笔记
任务的监控和使用 有几种方式监控spark应用:Web UI,指标和外部方法 Web接口 每个SparkContext都会启动一个web UI,默认是4040端口,用来展示一些信息: 一系列调度的st ...
- MySQL一对一:一对多:多对多: 实例!!!!
学生表和课程表可以多对多 一个学生可以学多门课程 一门课程可以有多个学生: 多对多 *** 一个学生对应一个班级 一个班级对应多个学生: 一对多 *** 一个老师对应多个学生 多个学生对应一个老师:一 ...
- Python random模块sample、randint、shuffle、choice随机函数概念和应用
Python标准库中的random函数,可以生成随机浮点数.整数.字符串,甚至帮助你随机选择列表序 列中的一个元素,打乱一组数据等. random中的一些重要函数的用法: 1 ).random() 返 ...
- primer漏配问题解决
在对之前的ITS数据(454数据)做split时,发现有一些reads没有被匹配上,但是barcode能够完全匹配,虽然之后的primer在中间漏了一个碱基,导致后面的碱基全部误匹配,从而导致这条re ...
- Tablayout ViewPage 使用示例
上一篇文章介绍了使用 FragmenttabHost 来使用 tab 导航:到 Android 5.0 的时候,又推出了 TabLayout.因此,有必要对tablayout 进行了解下. 首先我们来 ...
- robotframework学习笔记(七)------筛选执行用例
第一种:手动勾选用例 可勾选用户,然后点击运行,这样就只运行到勾选的用例.如果不勾选的点击运行就会运行所有用例. 第二种 菜单中去筛选 可在菜单中去筛选勾用例,然后点击运行 Select All Te ...
- 最新swift4.0 图片进行尺寸大小及体积压缩
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Menlo; color: #4dbf56; background-color: #282b3 ...
- Android studio打开项目一直卡住
修改/gradle/wrapper/gradle-wrapper.properties文件中的最后一行distributionUrl=:(可找一个可用项目的复制过来)
- 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...