リアクションとエクスプレスでバンドルしたよりスマートなwebpack

Question

リアクションアプリがあり、エクスプレスサーバー上で動作しており、webpackにバンドルされています。私の問題は、サーバを再起動するたびに、フロントエンドに何も変更を加えていないのに、変更を加えるときのようにフロントエンドバンドルを永久に再構築するということです。

サーバー部分をリロードして、フロントエンドバンドルに関係しないserver/api変更を行うだけで、現在のフロントエンドバンドルをそのまま残しておくとよいでしょう。ここで

は、DEV環境での実行コードは次のとおりです。

const compiler = webpack(webpackConfig) 
    const middleware = webpackMiddleware(compiler, { 
    publicPath: webpackConfig.output.publicPath, 
    contentBase: 'src', 
    stats: { 
     colors: true, 
     hash: false, 
     timings: true, 
     chunks: false, 
     chunkModules: false, 
     modules: false 
    } 
    }) 

    app.use(middleware) 
    app.use(webpackHotMiddleware(compiler)) 
    app.get('*', (req, res) => { 
    res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'build/app.html'))) 
    res.end() 
    }) 

これを行うには、よりスマートな方法はありますか？現在のフロントエンドバンドルをメモリに残して、サーバをリロードすることは可能ですか？または、バンドルを更新する必要があるかどうかを検出し、更新する必要がない場合はプロセスをスキップできますか？

ヒント、アドバイス、提案は大歓迎です！他の情報が必要な場合はお知らせください。ありがとう！

Answer 1

Chokidarソリューション

のWebPACK-DEV-ツールを使用している場合は、変更内容を見るための素晴らしいライブラリがchokidar

ChokidarはまだNode.jsのコアFSモジュールに依存しているが、使用する際にんです fs.watchとfs.watchFileを監視するために、 が受け取ったイベントを正規化します。多くの場合、ファイルの統計情報やディレクトリを取得することによって真実をチェックします。

ここでは、chokidarを使用してターゲットフォルダのみを見る小さな例です。特定のフォルダだけを対象にすることで、フロントエンドをそのまま残すことができます。私はあなたの特定のユースケースでこれを試していませんが、一見すると、これはあなたのニーズに合うかもしれません。

var production = process.env.NODE_ENV === 'production' 
if(!production) { 
    var chokidar = require('chokidar') 
    var watcher = chokidar.watch('./targetfolder') 
    watcher.on('ready', function() { 
    watcher.on('all', function() { 
     console.log("Clearing /targetfolder/ module cache from server") 
     Object.keys(require.cache).forEach(function(id) { 
     if (/[\/\\]targetfolder[\/\\]/.test(id)) delete require.cache[id] 
     }) 
    }) 
    }) 
} 

はUltimate Hot Reloading Example

NBと呼ばれるのGithub上の偉大な例では、あります：ディスクにファイルを書き込みませんWebPACKの-devのサーバーは、それがメモリからの結果を提供していますExpressのインスタンスの谷。しかしwebpack --watchはファイルをディスクに書き出します。

旗ソリューション

あなたはWebPACKのの--watchフラグを使用することができます。

あなたのpackage.jsonでは、サーバー（またはwebpackを実行するスクリプトブロック）を起動するスクリプトブロックに、これを追加します。webpack --progress --colors --watch。

Webpack documentationを参照してください、それは言う：

我々は手動ですべての変更後に再コンパイルする必要はありません...

ウォッチモードを使用する場合、WebPACKのはで使用されたすべてのファイルにファイルウォッチャーをインストールコンパイルプロセス。変更が検出されると、コンパイルが再度実行されます。キャッシングを有効にすると、webpackは各モジュールをメモリに保持し、変更されていなければ再利用します。package.jsonで

例：

"scripts": { 
    "dev": "webpack --progress --colors --watch" 
} 

Answer 2

私は私が急速に私のバンドルを再構築することができますが、その後それは、必ずしも実際の内部のサーバーを見てすることはないだろうSpringBootアプリ、でこの問題を持っていますフォルダに保存され、リアルタイムで表示されます。ですから、本当にあなたがする必要があるのは、WAR/JARからファイルを引っ張るのではなく、いつでもローカルフォルダからbundle.jsファイルを探すようにサーバーを設定する方法です。それは "ウェブパックの問題"ではありません。これは、フォルダのbundle.jsから直接サーバーを読み取る方法の問題です。私はあなたに春のやり方を教えてくれますが、それはあなたの建築ではありません。