WebPACKの-DEV-ミドルウェア

WebPACKの-DEV-ミドルウェアとは何ですか

WebPACKの-DEV-ミドルウェアは、容器（ラッパー）、それはサーバープロセス（サーバ）にWebPACKのできるファイル転送です。WebPACKの-DEV-ミドルウェア発現ミドルウェアで

WebPACKの-devのサーバーとの差異のWebPACK-DEV-ミドルウェア

WebPACKの-devのサーバーは、HTTPサーバー+はWebPACKの-DEV-ミドルウェア呼び出す有効実際に特急に相当します。その主な機能は、リソースファイルを提供することです。
変更はWebPACKのでコンパイルリアルタイムで元のファイル、WebPACKの-devのサーバーに対して行われた後、HTTPサーバーとクライアントの通信プロトコルは、WebSocketを使用し、WebPACKの-DEV-ミドルウェアは、
出力ファイルをメモリにコンパイルされますWebPACKのだろう。純粋なフロントエンドのプロジェクトのために、ライトバックエンドサービスとの統合が困難

メモリ内のWebPACK-DEV-ミドルウェアファイル出力。あなたは子供たちがWebPACKの-DEV-ミドルウェア、WebPACKのに応じて関係のコンテキストエントリおよび出力モジュールを引き出すことができるようになり、webpack.configを定義する
アプリケーションがファイルを要求するたびにそれが一致し、これに基づいて旅行マップされたファイルシステム上結果を入れて対応するキャッシュメモリは、そうでない場合、プロセスは、次の中間に進み、ファイル形式であなたに返されます。
それは、メモリファイルシステムの種類は、であるため、静的リソースサーバとして開発段階のために非常に高速で、非常に適し再建ので、リソースは様々な形式でクライアントにフィードバックすることができるので、WebPACKのは、ハンドルにモジュールなどのリソースのいずれかの種類を置くことができるので、、
あなたはHTTPサーバを置き換えることができます。実際には、ほとんどのユーザーが使用WebPACKの-devのサーバーはWebPACKの-DEV-ミドルウェアのexxpress +実現であるのWebPACK。違いは、唯一のWebPACK-devのサーバーがあることで
パッケージ化され、それに加えてwebpack.configコマンドラインパラメータは、カスタマイズ開発を行うことは困難です。WebPACKの-DEV-ミドルウェアミドルウェア、あなたがあなた自身のバックエンドサービスを作成し、それを統合することができ、それは比較的柔軟自由です。

例のWebPACK-DEV-ミドルウェア

安装エクスプレスのWebPACK-DEV-ミドルウェアNPM --save-DEVエクスプレスのWebPACK-DEV-ミドルウェアをインストール
新規ファイルのWebPACK-DEV-ミドルウェア
WebPACKの-DEV-ミドルウェア・ディレクトリに新しいファイルのWebPACK-DEV-middleware.js
WebPACKの-DEV-ミドルウェア・ディレクトリに新しいファイルserver.js
新しいファイルのsrcのWebPACK-DEV-ミドルウェアディレクトリで
srcディレクトリに新しいファイルjsファイルindex.jsを作成
新規ファイルa.js jsのディレクトリとb.jsで
以下のようにファイルのディレクトリ

WebPACKの-DEV-middleware.js以下の

const path = require("path");

module.exports = {
    entry:path.resolve(__dirname,"src/index.js"),
    output:{
        filename:"[name].js",
        path:path.resolve(__dirname,"dist"),
        publicPath:"/"
    },
    
}

publicPathは、ここで新しいファイルのパスポイントを生成することで、参照がCDNリソースをシミュレートするために使用することができます

server.jsは、以下の

const webpack = require("webpack");
const express = require("express");
const WebpackDevMiddleware = require("webpack-dev-middleware");
const app = express();
const config = require("./webpack-dev-middleware.js");
const compiler = webpack(config);
app.use(WebpackDevMiddleware(compiler,{
    publicPath:config.output.publicPath
}));
app.listen(3000,function(){
    console.log("example app listening on port 3000\n")
})

ここPublicPathは、コンフィギュレーションの相対パスをお勧めしますので、意味そのパスから、ストアメモリへのリソースをマークし、見つけるためのWebPACK-DEV-ミドルウェアとき、使用中、設定publicPath、
publicPathのWebPACKの-DEV-ミドルウェアがなければなりません相対パス

index.jsは、以下の

require("./src/a.js");
require("./src/b.js");
console.log("this is index.js")

a.jsは、以下の

console.log("this a file");

b.jsは、以下の

console.log('this is b file');

修正packge.json

"script":{
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config demo/webpack-dev-server/webpack-dev-server.js",
    "server":"node demo/webpack-dev-middleware/server.js"
}

端末内のNPMの実行サーバーを実行します
アクセスlhttp：// localhostを：3000 /結果参照するには
、次のような結果があります