本文系统讲解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