babel、nodemonスクリプトのwebpack？

Question

babelとnodemonでwebpackを設定する方法があるのだろうかと思っていました。私はかなりウェブを検索しましたが、役立つものは何も見つかりませんでした。あるいは、私はツールを作るのがかなり新しいので、私かもしれません。 私は私のpackage.jsonでこのスクリプトを持っている：

"start": "nodemon app.js --exec babel-node" 

それは私のコードをtranspileし、また変更があった場合に、サーバーを再起動します。私は、ウォッチ機能を備えたwebpack用の設定があるかどうか疑問に思っていました。私はwebpack（サーバーを実行し、変更を監視し、バベル・トランスパイールと一緒に再起動する）でそれを行うことはできますか？

Answer 1

ノードモンを使用する必要はありません。webpack's watch featureを使用できます。

const path = require('path'); 
const webpack = require('webpack'); 
const spawn = require('child_process').spawn; 

const compiler = webpack({ 
    // add your webpack configuration here 
}); 
const watchConfig = { 
    // compiler watch configuration 
    // see https://webpack.js.org/configuration/watch/ 
    aggregateTimeout: 300, 
    poll: 1000 
}; 

let serverControl; 

compiler.watch(watchConfig, (err, stats) => { 
    if (err) { 
     console.error(err.stack || err); 
     if (err.details) { 
      console.error(err.details); 
     } 
     return; 
    } 

    const info = stats.toJson(); 

    if (stats.hasErrors()) { 
     info.errors.forEach(message => console.log(message)); 
     return; 
    } 

    if (stats.hasWarnings()) { 
     info.warnings.forEach(message => console.log(message)); 
    } 

    if (serverControl) { 
     serverControl.kill(); 
    } 

    // change app.js to the relative path to the bundle created by webpack, if necessary 
    serverControl = spawn('node', [path.resolve(__dirname, 'app.js')]); 

    serverControl.stdout.on('data', data => console.log(data.toString())); 
    serverControl.stderr.on('data', data => console.error(data.toString())); 
}); 

あなたは、あなたのサーバコードに変更を加える場合は、WebPACKのは、再コンパイルします

node backend-dev.js 

を使用してコマンドライン上でこのスクリプトを起動することができます。ここでは

はのはbackend-dev.jsそれを呼びましょう、スクリプトの例ですサーバーを再始動してください。

Answer 2

バーベルの部分については、私はbabel loaderあなたがカバーしていると思います。私は私のwebpack.config.js（WebPACKの2）でこれを使用します。

module: { 
    ... 
    rules: [ 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: {presets: ['es2015']} 
    } 
    ] 
} 

しかし、私はちょうど半分の答えのために、とても残念にnodemon使用しないでください。私はwebpack-dev-serverを開発に使用しています。ステージング/生産のPM2は、私は手動で物事を再起動する必要はありませんので、ステージングしながら、それは見ています使用していると、それはwebpacksのDITOより設定するには、はるかに簡単です：

// pm2's ecosystem.json (just to be thorough): 
"watch"  : "./", 
"ignore_watch" : "node_modules", 

しかし、生産ではありません時計、なしいいえ、私ではなく、触ってはいけません。