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 ...
随机推荐
- 在linux环境下编译运行OpenCV程序的两种方法
原来以为在Ubuntu下安装好了OpenCV之后,自己写个简单的程序应该很容易吧,但是呢,就是为了编译一个简单的显示图片的程序我都快被弄崩溃了. 在谷歌和上StackOverFlow查看相关问题解答之 ...
- MySQL迁移方案(后续再补充)
出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该声明. ...
- PowerShell 函数
PowerShell 中函数是一系列 PowerShell 语句的组合.当你通过函数的名称调用函数时,函数中的语句会被顺序的执行,就像在命令行中执行它们一样. 从 hello world 开始 fun ...
- 中国孩子的micro:bit:TurnipBit自制小乐器教程实例
孩子们是最贪玩的也是最聪明的,因此在过去的数年中,市面上出现了不少寓教于乐的理工科知识(STEM)学习新方法.如今这类产品中又有了一名新成员,TPYBoard重磅推出一款针对小白.中小学生的可编程计算 ...
- Elasticsearch强制重置未分配的分片(unassigned)
强制重置未分片的分片,这个问题源自于Elasticsearch维护中,Node意外退出的场景. 意外退出后Elasticsearch由于网络原因或者jvm性能压力,未能短时间内分配分片. 看一下分片的 ...
- vmvare centos 7.0 root密码忘记后重置及总结
今天遇到了一个比较尴尬的事情,我centos 7.0的虚拟机密码忘了.....里面还有我配置好的环境呢.于是我就上网上搜索各种方法,最后经我验证下面这个方法比较靠谱: 使用光盘修复Centos: ht ...
- 用mint ui去实现滚动选择日期并可以关闭拾取器
转发要备注出处哈,么么哒 注释的那些部分都是我在尝试的时候写得,留给自己看得,删除不影响效果哈,希望对你们有帮助,比较忙可能写得很粗糙,不好意思,有空再改了 实例一: <template&g ...
- Redis Sentinel配置小记
Sentinel是一个管理多个redis实例的工具,它可以实现对redis的监控.通知.自动故障转移.sentinel不断的检测redis实例是否可以正常工作,通过API向其他程序报告redis的状态 ...
- 前端学习:html基础学习一
1.HTML的语法(主要内容HTML语法格式.文档注释.代码格式) HTML的特点 1.可以设置文本的格式,比如标题.字号.文本颜色.段落等等 2.可以创建列表(例如打开百度,我们可以看到这样的列表) ...
- JavaScrip:Function函数编程
自定义函数定义 1.函数通过function关键字创建,函数创建格式: function 函数名称([参数,...]){ 代码段; return 返回值; } 注意事项: 函数名称不要包含特殊字符 函 ...