vue-cli足場buildディレクトリ中のdev-server.js配置ファイルを詳しく説明してください。
7729 ワード
本文のシステムはvue-cli足場のbuildディレクトリの中のdev-server.jsの配置ファイルを説明します。
1.このプロファイルはnpm run devとnpm run startの入口配置ファイルで、主に環境開発に使われます。
2.これはシステムの設定ファイルですので、モジュールとプラグインが多く含まれます。この部分は複数の文章に分けて解説します。他のブログの記事に注目してください。
3.コメントについて・より複雑な説明がある場合は、(1)のように、それぞれの注釈モジュールに説明を書きますので、自分で確認してください。
4.コードを付ける
(1)webpack-dev-middlewareプラグイン
このプラグインは環境開発にしか使えません。以下はこのプラグインの説明です。
これは簡単なwebpack包装ミドルウェアです。このプラグインは主にファイルのためのものです。ファイルを修正したらwebpackサーバーに提出して、これらの修正されたファイルを処理します。
このプラグインにはいくつかの利点があります。
第一に、すべてのファイルはdiskに書いてあります。ファイルの処理はメモリに行います。
第二に、ファイルがwatchモードで変更されたら、この中間部品はこれらの古いbundleにサービスしなくなります。これらの古いbundleにファイルが変更されたら、 このミドルウェアは要求を送信しません。現在のコンパイルが完了するまで、最新のファイルは変更されました。要求を送りますので、手動で更新する必要はありません。
第三に、今後のバージョンで最適化します。
まとめて、この中間部品はwebpack-dev-serverの核心であり、修正文書を実現し、webapack自動更新の機能を実現します。
npm install webpack-deb-middlewareをインストールします。
使用方法は以下の通りです。以下の使用方法もwebpack-dev-serverで実現したコードです。
上のobj 1はwebpackの設定対象です。webpackを使ってcomplerのコンパイル対象に変換します。obj 2はファイルを更新して包装した構成です。
webpackMiddleware処理後、静的経路に戻り、Obj 2に関するファイルの配置項目を入手しやすくなり、自分で調べられます。publicPathを追加しなければなりません。
ここでは、私たちの静的サーバはnode.jsです。ファイルは修正されました。webpack-dev-middlewareは修正されたファイルをコンパイルした後、nodejsサーバにどのファイルが修正されましたか?そして最新のファイルを静的サーバにアップロードしました。分かりましたよね。
(2)webpack-hot-middlewareプラグイン
このプラグインはwebpack-dev-middlewareを更新したファイル通知ブラウザにコンパイルして、ブラウザにファイルの更新方法を教えて、Webpack hot reloadingを実現します。
この2つのプラグインを組み合わせると、webpack-dev-severは必要なくてもいいです。つまり、自分でhot-replaccement熱交換機能を実現できます。webpack-hot-middlewareプラグインはブラウザにファイルの更新を通知します。大体は一つのjsonオブジェクトを通じて実現します。具体的な実現メカニズムはここでは多くは言いません。
npm install webpack-hot-middlewareをインストールします。
webpack-dev-middlewareを使用した後、下記のコードを追加すればいいです。
単一ページアプリケーションを開発する際には、全体として項目は一つのページになりますので、リフレッシュボタンをクリックすることにより、この時点でリンクとはホームページのアドレスではなく、404;または他のリンクを通じて(例えば/login.htmlロゴがないとエラーが発生しますが、このプラグインの役割は不正な操作による404の場合は、ページをデフォルトのindexとして位置づけて使用するのも簡単です。覚えておけばいいです。
npm install-save connect-history-appi-fallbackをインストールします。
使用
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 + '
')
// 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包装ミドルウェアです。このプラグインは主にファイルのためのものです。ファイルを修正したらwebpackサーバーに提出して、これらの修正されたファイルを処理します。
このプラグインにはいくつかの利点があります。
第一に、すべてのファイルはdiskに書いてあります。ファイルの処理はメモリに行います。
第二に、ファイルがwatchモードで変更されたら、この中間部品はこれらの古いbundleにサービスしなくなります。これらの古いbundleにファイルが変更されたら、 このミドルウェアは要求を送信しません。現在のコンパイルが完了するまで、最新のファイルは変更されました。要求を送りますので、手動で更新する必要はありません。
第三に、今後のバージョンで最適化します。
まとめて、この中間部品はwebpack-dev-serverの核心であり、修正文書を実現し、webapack自動更新の機能を実現します。
npm install webpack-deb-middlewareをインストールします。
使用方法は以下の通りです。以下の使用方法もwebpack-dev-serverで実現したコードです。
var webpackMiddleware = require("webpack-deb-middleware");
app.use(webpackMiddleware(webpack({obj1}),{obj2}))
app.useは静的経路を設定するためのexpressの方法です。上のobj 1はwebpackの設定対象です。webpackを使ってcomplerのコンパイル対象に変換します。obj 2はファイルを更新して包装した構成です。
webpackMiddleware処理後、静的経路に戻り、Obj 2に関するファイルの配置項目を入手しやすくなり、自分で調べられます。publicPathを追加しなければなりません。
ここでは、私たちの静的サーバはnode.jsです。ファイルは修正されました。webpack-dev-middlewareは修正されたファイルをコンパイルした後、nodejsサーバにどのファイルが修正されましたか?そして最新のファイルを静的サーバにアップロードしました。分かりましたよね。
(2)webpack-hot-middlewareプラグイン
このプラグインはwebpack-dev-middlewareを更新したファイル通知ブラウザにコンパイルして、ブラウザにファイルの更新方法を教えて、Webpack hot reloadingを実現します。
この2つのプラグインを組み合わせると、webpack-dev-severは必要なくてもいいです。つまり、自分でhot-replaccement熱交換機能を実現できます。webpack-hot-middlewareプラグインはブラウザにファイルの更新を通知します。大体は一つのjsonオブジェクトを通じて実現します。具体的な実現メカニズムはここでは多くは言いません。
npm install webpack-hot-middlewareをインストールします。
webpack-dev-middlewareを使用した後、下記のコードを追加すればいいです。
app.use(require("webpack-hot-middleware")(compiler));
(3)connect-history-appi-fallbackプラグイン単一ページアプリケーションを開発する際には、全体として項目は一つのページになりますので、リフレッシュボタンをクリックすることにより、この時点でリンクとはホームページのアドレスではなく、404;または他のリンクを通じて(例えば/login.htmlロゴがないとエラーが発生しますが、このプラグインの役割は不正な操作による404の場合は、ページをデフォルトのindexとして位置づけて使用するのも簡単です。覚えておけばいいです。
npm install-save connect-history-appi-fallbackをインストールします。
使用
var history = require('connect-history-api-fallback');
var express = require('express');
var app = express();
app.use(history());
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。