watchを有効にして起動しているWebpackを実行しています

Question

私はエクスプレスサーバをバンドルするためにwebpackを使用しており、webpack watcherを利用したいと考えています。バンドルが変更されたときにnodemonを使用してサーバーを再起動しています。

1つの端末でウォッチャーを手動で実行し、1秒後にnodemonを起動することはできますが、最終的には「npm start」スクリプトのみを使用して両方のプロセスをきれいに蹴ることができます。

ex。 Webpackバンドル - > Nodemon Starts - > Webpackウォッチャースタート

このトピックに関するご意見はありますか？

Answer 1

私は、CLIとは対照的にWebpack/Nodemon Node APIを使用してカスタムビルドスクリプトを作成しました。このオプションは、私の好みに合わせて端末の出力をカスタマイズするための柔軟性を提供しました。

import webpack from 'webpack'; 
import nodemon from 'nodemon'; 
import webpackConfig from './webpack.config.babel'; 

const compiler = webpack(webpackConfig); 
compiler.run((runErrors, runStats) => { 
    console.log(runStats.toString({ 
    cached: false, 
    colors: true, 
    assets: true, 
    chunks: false, 
    chunkModules: false, 
    chunkOrigins: false, 
    errors: true, 
    errorDetails: true, 
    hash: false, 
    modules: false, 
    timings: false, 
    warnings: false, 
    version: false, 
    })); 
    console.log(); 

    nodemon({ 
    script: 'build/server.bundle.js', 
    watch: 'build/server.bundle.js' 
    }).on('restart',() => { 
    process.env.NODEMON_STATUS = 'restarted'; 
    }); 

    compiler.watch({}, (watchErrors, watchStats) => { 
    const hasErrors = watchErrors || watchStats.hasErrors(); 
    if (hasErrors) { 
     console.log((watchStats.toString({ 
     cached: false, 
     colors: true, 
     assets: false, 
     chunks: false, 
     chunkModules: false, 
     chunkOrigins: false, 
     errors: true, 
     errorDetails: true, 
     hash: false, 
     modules: false, 
     timings: false, 
     warnings: false, 
     version: false, 
     children: false, 
     reasons: false, 
     source: false, 
     }))); 
    } 
    }); 
}); 

process.on('SIGINT',() => { 
    process.exit(0); 
}); 
process.on('SIGTERM',() => { 
    process.exit(0); 
}); 
process.on('SIGUSR2',() => { 
    process.exit(0); 
}); 
process.on('exit',() => { 
    process.exit(0); 
}); 

Answer 2

nodemonがファイルの変更時にサーバーを自動的に再起動する場合は、同時に呼び出されるパッケージを使用できます。

まず、devの依存関係として同時にインストールします。その後

npm i concurrently --save-dev 

あなたのpackage.json

"start": "**webpack build** && concurrently --kill-others \"nodemon app.js\" \"**webpack watch**\"" 

PSを編集：私は、あなたが構築し、時計あなたのコマンドを使用して、それらの間のコマンドを変更する必要があり、**プレースホルダを追加しました。