집 > 기사 > 웹 프론트엔드 > vue-cli 스캐폴딩의 dev-server.js 구성 파일 사용에 대한 자세한 설명

vue-cli 스캐폴딩의 dev-server.js 구성 파일 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-14 13:57:572557검색

이번에는 vue-cli 스캐폴딩의 dev-server.js구성 파일 사용에 대한 자세한 설명을 가져왔습니다. vue-cli 스캐폴딩 dev-server.js 구성 사용 시 주의사항은 무엇인가요? 다음은 실제 사례를 살펴보겠습니다.

이 글은 vue-cli 스캐폴딩 빌드 디렉터리에 있는 dev-server.js 구성 파일을 체계적으로 설명합니다

1. 이 구성 파일은 npm run dev 및 npm run start 명령에 대한 항목 구성 파일입니다. 주로 개발 환경

에서 사용됩니다. 2. 시스템 구성 파일이고 많은 모듈과 플러그인이 포함되어 있으므로 이 부분은 여러 글에서 설명하겠습니다

3. 댓글에 대하여 •더 복잡한 설명은 식별((1) 등)을 통해 별도의 댓글 모듈에 설명을 작성해 놓으니 직접 확인해주세요

4. 코드를 업로드하세요

// 导入check-versions.js文件，并且执行导入的函数，用来确定当前环境node和npm版本是否符合要求
// 关于check-versions请查看我博客check-versions的相关文章
require('./check-versions')()
// 导入config目录下的index.js配置文件，此配置文件中定义了生产和开发环境中所要用到的一些参数
// 关于index.js的文件解释请看我博客的index.js的相关文章
var config = require('../config')
// 下面表示如果如果没有定义全局变量NODE_ENV，则将NODE_ENV设置为"development"
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
// opn插件是用来打开特定终端的，此文件用来在默认浏览器中打开链接 opn(url)
var opn = require('opn')
// nodejs路径模块
var path = require('path')
// nodejs开发框架express，用来简化操作，有兴趣可以自行去了解
var express = require('express')
// 引入webpack模块，用来使用webpack内置插件
var webpack = require('webpack')
// 引入http-proxy-middleware插件，此插件是用来代理请求的只能用于开发环境，目的主要是解决跨域请求后台api
var proxyMiddleware = require('http-proxy-middleware')
// 下面的意思是指，如果不是testing环境就引入webpack.dev.conf.js配置文件
// 关于webpack.dev.conf.js配置文件请关注我的相关文章，建议现在就去看，否则后面看着吃力
var webpackConfig = process.env.NODE_ENV === 'testing' ?
  require('./webpack.prod.conf') :
  require('./webpack.dev.conf')
// default port where dev server listens for incoming traffic
// 下面是webpack-dev-server 监听的端口号，因为没有设置process.env.PORT，所以下面监听的就是config.dev.port即8080
var port = process.env.PORT || config.dev.port
  // automatically open browser, if not set will be false
// 下面是true,至于为啥，本来就是true还要加!!两个感叹号，估计是vue作者装了个逼吧
var autoOpenBrowser = !!config.dev.autoOpenBrowser
  // Define HTTP proxies to your custom API backend
  // https://github.com/chimurai/http-proxy-middleware
// 下面是解决开发环境跨域问题的插件，我在config目录index.js文章中有介绍，自行查看
var proxyTable = config.dev.proxyTable
// 下面是创建node.js的express开发框架的实例，别问我为什么这样，自己看node.js去吧
var app = express()
// 把配置参数传递到webpack方法中，返回一个编译对象，这个编译对象上面有很多属性，自己去看吧，主要是用到里面的状态函数 如compilation，compile，after-emit这类的
var compiler = webpack(webpackConfig)
// 下面是webpack-dev-middleware和webpack-hot-middleware两兄弟，这两个是黄金组合
// 而vue作者用这两个插件也是用的最基本的形式，详情看(1) (2)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true // 使用friendly-errors-webpack-plugin插件这个必须设置为true，具体看我的wepback-dev-config.js
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
    log: () => {} // 使用friendly-errors-webpack-plugin插件这个必须设置为true，具体看我的wepback-dev-config.js
  })
  // force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function(compilation) {
  // webpack任何一个插件都plugin这个方法，里面可以传递钩子函数，用来在插件各个阶段做特殊处理，钩子函数种类很多
  compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
    // 当插件html-webpack-plugin产出完成之后，强制刷新浏览器
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})
// proxy api requests
Object.keys(proxyTable).forEach(function(context) {
  // 下面是代理表的处理方法，看看就行了，几乎用不上，除非你是全栈，不用webpack-dev-server，使用后台语言做服务器
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})
// handle fallback for HTML5 history API
// 这个插件是用来解决单页面应用，点击刷新按钮和通过其他search值定位页面的404错误
// 详情请看(3)
app.use(require('connect-history-api-fallback')())
// serve webpack bundle output
// app.use是在响应请求之前执行的，用来指定静态路径，挂载静态资源
app.use(devMiddleware)
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)
// serve pure static assets
// 下面的staticPath是 static ，path.posix.join其他配置文件中我已经介绍了，这里不再赘述
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// 挂载静态资源，下面的方法是用虚拟目录来访问资源，staticPath就是虚拟目录路径，其实不管设不设置都是static
app.use(staticPath, express.static('./static'))
// 下面结果就是 'http://localhost:8080'
var uri = 'http://localhost:' + port
// 下面是es6的promise规范，用来处理嵌套请求的
var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve // resolve是一个回调函数专门用来传递成功请求的数据
})
// 下面是加载动画
console.log('> Starting dev server...')
// waitUntilValid是webpack-dev-middleware实例的方法，在编译成功之后调用
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
    // when env is testing, don't need open it
    // 测试环境不打开浏览器
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve() // 这里没有传递数据，这只是在模拟
})
// node.js监听端口
var server = app.listen(port)
// 这个导出对象是用来对外提供操作服务器和接受数据的接口，vue作者可谓考虑颇深啊
module.exports = {
  ready: readyPromise, // promise实例，可以通过readyPromise.then收到数据
  close: () => {
    server.close() // 关闭服务器
  }
}

설명

(1)webpack-dev-middleware 플러그인

이 플러그인은 개발 환경에서만 사용할 수 있습니다. 다음은 이 플러그인에 대한 설명입니다

이것은 간단한 웹팩 패키징인 미들웨어입니다. 이 플러그인은 주로 파일에 대해 한 가지 작업을 수행합니다. 즉, 파일이 수정되면 웹팩 서버에 제출된 다음 수정된 파일을 처리합니다

. 이 플러그인에는 여러 가지 장점이 있습니다

첫째, 모든 파일은 디스크에 기록되고, 파일 처리는 메모리에서 수행됩니다

둘째, 감시 모드에서 파일이 변경되면 이 미들웨어는 이전 번들을 제공하지 않습니다. 이전 번들에 파일 변경 사항이 있으면 이 미들웨어는 요청을 보내지 않지만 현재 컴파일이 끝날 때까지 기다립니다. 최신 파일이 변경된 경우에만 전송되므로 수동으로 새로 고칠 필요가 없습니다

셋째, 향후 버전에서는 최적화하겠습니다

정리하자면, 이 미들웨어는 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 메소드를 사용하여 컴파일러 컴파일 객체로 변환됩니다. obj2 구성은

를 사용하여 업데이트된 파일을 패키징한 후의 구성입니다. webpackMiddleware로 처리한 후 파일에서 obj2의 구성 항목을 가져오는 데 편리한 정적 경로를 반환합니다. publicPath

를 직접 추가해야 합니다. 간단히 말해서, 우리의 정적 서버는 node.js입니다. 이제 파일이 수정되었습니다. webpack-dev-middleware가 수정된 파일을 컴파일한 후 nodejs 서버에 알려줍니다. 수정되었으며 최신 파일 업로드가 정적 서버에 있다는 것은 충분히 명확합니다

(2)webpack-hot-middleware 플러그인

이 플러그인은 webpack-dev-middleware로 컴파일된 업데이트된 파일을 브라우저에 알리고 브라우저에 파일 업데이트 방법을 알려주어 Webpack 핫 리로딩

을 달성하는 데 사용됩니다. 이 두 플러그인을 함께 사용하면 webpack-dev-sever가 필요하지 않습니다. 즉, webpack-hot-middleware 플러그인은 대략적으로 파일을 업데이트하도록 브라우저에 알립니다. 여기서는 구체적인 구현 메커니즘에 대해 자세히 설명하지 않겠습니다

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());

를 사용하세요. 이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!