本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件
- 这个配置文件是命令
npm run dev
和 npm run start
的入口配置文件,主要用于开发环境 - 由于这是一个系统的配置文件,将涉及很多的模块和插件,所以这部分内容我将分多个文章讲解,请关注我博客的其他文章
关于注释
- 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看
上代码
require('./check-versions')()
var config = require('../config')
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = process.env.NODE_ENV === 'testing' ?
require('./webpack.prod.conf') :
require('./webpack.dev.conf')
var port = process.env.PORT || config.dev.port
var autoOpenBrowser = !!config.dev.autoOpenBrowser
var proxyTable = config.dev.proxyTable
var app = express()
var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {}
})
compiler.plugin('compilation', function(compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
Object.keys(proxyTable).forEach(function(context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
app.use(require('connect-history-api-fallback')())
app.use(devMiddleware)
app.use(hotMiddleware)
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
var uri = 'http://localhost:' + port
var _resolve
var readyPromise = new Promise(resolve => {
_resolve = resolve
})
console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
console.log('> Listening at ' + uri + '\n')
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
_resolve()
})
var server = app.listen(port)
module.exports = {
ready: readyPromise,
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());
转至:https://www.cnblogs.com/ye-hcj/p/7091706.html