我们在使用vue-cli搭建vuejs项目(Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目)的时候,会自动生成一系列文件,其中就包含webpack配置文件。我们现在来看下,这些配置到底是什么意思,对我们开发过程中有什么影响。

项目搭建好了, 使用Bash运行npm run dev, 然后Bash界面会打印出一些东西,之后默认浏览器就打开了一个页面。为什么会有这些动作呢?我们从package.json开始看。

  1. // package.json
  2. {
  3. ...
  4. "scripts": {
  5. "dev": "node build/dev-server.js",
  6. "start": "node build/dev-server.js",
  7. "build": "node build/build.js",
  8. "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
  9. "e2e": "node test/e2e/runner.js",
  10. "test": "npm run unit && npm run e2e"
  11. },
  12. ...
  13. }

运行npm run dev其实是执行了 build/dev-server.js文件。

那我们现在先分析这个文件,直接上源码。

  1. // dev-server.js
  2. // 调用check-versions.js 模块,检查版本node和npm的版本
  3. require('./check-versions')()
  4. // 获取配置
  5. var config = require('../config')
  6. // 如果Node的环境变量中没有设置当前的环境(NODE_ENV), 则使用config中配置的环境作为当前环境
  7. if (!process.env.NODE_ENV) {
  8. process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
  9. }
  10. // opn模块,使用默认应用程序,打开网址、文件、 可执行程序等内容的一个插件。
  11. // 例如,使用默认浏览器打开urls。跨平台可用。
  12. // 这里用它来调用默认浏览器打开dev-server监听的端口,例如: localhost:8080
  13. var opn = require('opn')
  14. // path模块提供用于处理文件和目录路径的实用程序。
  15. var path = require('path')
  16. // 引入express 模块
  17. var express = require('express')
  18. // 引入 webpack模块
  19. var webpack = require('webpack')
  20. // 一个express中间件,用于将http请求代理到其他服务器
  21. // 例:localhost:8080/api/xxx --> localhost:3000/api/xxx
  22. // 这里使用该插件可以将前端开发中涉及到的请求代理到API服务器上,方便与服务器对接
  23. var proxyMiddleware = require('http-proxy-middleware')
  24. // 根据 Node 环境来引入相应的 webpack 配置
  25. // 这里用 "testing" 来判断Node环境, 是因为在两个webpack.***.conf中还会有判断
  26. var webpackConfig = process.env.NODE_ENV === 'testing'
  27. ? require('./webpack.prod.conf')
  28. : require('./webpack.dev.conf')
  29. // dev-server 监听的端口,默认为config.dev.port设置的端口,即8080
  30. // default port where dev server listens for incoming traffic
  31. var port = process.env.PORT || config.dev.port
  32. // 用于判断是否要自动打开浏览器的布尔变量,
  33. // 当配置文件中没有设置自动打开浏览器的时候其值为 false
  34. // `!!`是一个逻辑操作,表示强制转换类型。这里强制转换为`bool`类型
  35. // automatically open browser, if not set will be false
  36. var autoOpenBrowser = !!config.dev.autoOpenBrowser
  37. // 定义HTTP代理,到自定义API接口
  38. // Define HTTP proxies to your custom API backend
  39. // https://github.com/chimurai/http-proxy-middleware
  40. var proxyTable = config.dev.proxyTable
  41. // 创建一个express实例
  42. var app = express()
  43. // 根据webpack配置文件创建Compiler对象
  44. var compiler = webpack(webpackConfig)
  45. // 引入webpack开发中间件, 此插件只在开发环境中有用。
  46. // 使用compiler对象来对相应的文件进行编译和绑定
  47. // 编译绑定后将得到的产物存放在内存中而没有写进磁盘
  48. // 将这个中间件交给express使用之后即可访问这些编译后的产品文件
  49. var devMiddleware = require('webpack-dev-middleware')(compiler, {
  50. //绑定中间件到publicpath中,使用方法和在webpack中相同
  51. publicPath: webpackConfig.output.publicPath,
  52. quiet: true // 允许在console控制台显示 警告 和 错误 信息
  53. })
  54. // 引入热重载功能的中间件。
  55. // Webpack热重载仅使用webpack-dev-middleware开发中间件。
  56. // 这个中间件,允许您在没有webpack-dev-server的情况下,将热重载功能到现有服务器中。
  57. var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  58. // 用于打印行的功能
  59. log: () => {}
  60. })
  61. // 当html-webpack-plugin 提交之后通过热重载中间件发布重载动作使得页面重载
  62. // force page reload when html-webpack-plugin template changes
  63. compiler.plugin('compilation', function (compilation) {
  64. compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
  65. hotMiddleware.publish({ action: 'reload' })
  66. cb()
  67. })
  68. })
  69. // 将 proxyTable 中的代理请求配置挂在express服务器上
  70. // proxy api requests
  71. Object.keys(proxyTable).forEach(function (context) {
  72. var options = proxyTable[context]
  73. if (typeof options === 'string') {
  74. options = { target: options }
  75. }
  76. app.use(proxyMiddleware(options.filter || context, options))
  77. })
  78. // connect-history-api-fallback 模块,通过指定的索引页来代理请求的中间件,对于使用HTML5历史API的单个页面应用程序非常有用。
  79. // 处理 HTML5历史api回退的问题
  80. // handle fallback for HTML5 history API
  81. app.use(require('connect-history-api-fallback')())
  82. // 为webpack打包输出服务
  83. // serve webpack bundle output
  84. app.use(devMiddleware)
  85. // 热重载和状态保留功能
  86. // 显示编译错误信息
  87. // enable hot-reload and state-preserving
  88. // compilation error display
  89. app.use(hotMiddleware)
  90. // posix属性提供了对路径方法的POSIX特定实现的访问。
  91. // 服务纯静态资源。 利用Express托管静态文件,使其可以作为资源访问
  92. // 想要访问static文件夹下的资源,必须添加 staticPath 返回的地址作为上一级地址。
  93. // serve pure static assets
  94. var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
  95. app.use(staticPath, express.static('./static'))
  96. // 应用启动时候的访问地址信息,例如 http://localhost:8080
  97. var uri = 'http://localhost:' + port
  98. // 异步回调
  99. var _resolve
  100. var readyPromise = new Promise(resolve => {
  101. _resolve = resolve
  102. })
  103. console.log('> Starting dev server...')
  104. // 如果webpack开发中间件有效执行,那么执行后面的回调函数。
  105. devMiddleware.waitUntilValid(() => {
  106. console.log('> Listening at ' + uri + '\n')
  107. // 如果是 testing 环境, 不需要打开浏览器
  108. // when env is testing, don't need open it
  109. if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
  110. opn(uri)
  111. }
  112. _resolve()
  113. })
  114. // 启动express服务器并监听相应的端口(8080)
  115. var server = app.listen(port)
  116. // 模块导出。
  117. // 1:执行异步函数
  118. // 2:提供close方法,关闭服务器
  119. module.exports = {
  120. ready: readyPromise,
  121. close: () => {
  122. server.close()
  123. }
  124. }

以上,就是我对这个文件的解析。

后续再对其他文件解析...欢迎关注

vue-cli的webpack模版项目配置解析-build/dev-server.js的更多相关文章

  1. vue-cli的webpack模版项目配置解析

    上一篇文章已经分析了build/dev-server.js,里面使用到了其他config文件. 那么我们这篇文章,按着dev-server.js的使用顺序,来分析下其他文件. 首选,调用check-v ...

  2. 解决新版本webpack vue-cli生成文件没有dev.server.js问题

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  3. Vue Cli 3:创建项目

    一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...

  4. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

  5. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  6. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  7. golang 开源项目: 配置解析模块--config

    在golang中,配置文件经常使用json格式.json格式的语法,有些繁琐,尤其是出现嵌套的时候,每一块都需要大括号包裹,看起来很臃肿. 本着简单易用的原则,个人开发了一个配置解析模块config, ...

  8. Vue CLI 3开发中屏蔽的EsLint错误 (.eslintrc.js 在vue3+中 修改这个)

    1.关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校 ...

  9. 让我们用Vue cli全家桶搭建项目

    一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...

随机推荐

  1. Java UDP实现聊天功能代码

    我以前经常写的是基于TCP的网络编程,由于TCP建立连接鼻血要经过三次握手连接,服务器端需要阻塞式等待客户端的连接.而UDP则是可以直接向目的地址的目的端口上发送数据包,由于它只负责发送出去就好,不管 ...

  2. Spark监控官方文档学习笔记

    任务的监控和使用 有几种方式监控spark应用:Web UI,指标和外部方法 Web接口 每个SparkContext都会启动一个web UI,默认是4040端口,用来展示一些信息: 一系列调度的st ...

  3. MySQL一对一:一对多:多对多: 实例!!!!

    学生表和课程表可以多对多 一个学生可以学多门课程 一门课程可以有多个学生: 多对多 *** 一个学生对应一个班级 一个班级对应多个学生: 一对多 *** 一个老师对应多个学生 多个学生对应一个老师:一 ...

  4. Python random模块sample、randint、shuffle、choice随机函数概念和应用

    Python标准库中的random函数,可以生成随机浮点数.整数.字符串,甚至帮助你随机选择列表序 列中的一个元素,打乱一组数据等. random中的一些重要函数的用法: 1 ).random() 返 ...

  5. primer漏配问题解决

    在对之前的ITS数据(454数据)做split时,发现有一些reads没有被匹配上,但是barcode能够完全匹配,虽然之后的primer在中间漏了一个碱基,导致后面的碱基全部误匹配,从而导致这条re ...

  6. Tablayout ViewPage 使用示例

    上一篇文章介绍了使用 FragmenttabHost 来使用 tab 导航:到 Android 5.0 的时候,又推出了 TabLayout.因此,有必要对tablayout 进行了解下. 首先我们来 ...

  7. robotframework学习笔记(七)------筛选执行用例

    第一种:手动勾选用例 可勾选用户,然后点击运行,这样就只运行到勾选的用例.如果不勾选的点击运行就会运行所有用例. 第二种 菜单中去筛选 可在菜单中去筛选勾用例,然后点击运行 Select All Te ...

  8. 最新swift4.0 图片进行尺寸大小及体积压缩

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Menlo; color: #4dbf56; background-color: #282b3 ...

  9. Android studio打开项目一直卡住

    修改/gradle/wrapper/gradle-wrapper.properties文件中的最后一行distributionUrl=:(可找一个可用项目的复制过来)

  10. 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例

    使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...