この記事では、Visual Studioからのwebpackの操作をより便利にする方法、つまり、プロジェクトを開くときにwebpackを自動的に起動する、ファイルが変更されたときにバンドルする、デスクトップでエラーを報告する方法について説明します。

設置

webpackをまだインストールしていない場合はインストールします。

npm install webpack babel-loader babel-core --save-dev
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、 Webpack Task Runnerアドオンをインストールします（[ツール]-> [拡張機能と更新プログラム]）。

構成ファイル

アドオンをインストールすると、Visual Studioに新しいWebPack構成ファイルテンプレートが表示されます。





プロジェクトに追加します。



テンプレートwebpack.config.js



は次のようになります。

 "use strict"; module.exports = { entry: "./src/file.js", output: { filename: "./dist/bundle.js" }, devServer: { contentBase: ".", host: "localhost", port: 9000 }, module: { loaders: [ { test: /\.jsx?$/, loader: "babel-loader" } ] } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

entry



は、jsプロジェクトの入力ポイントを指定し、 output



は、完成したバンドルを保存する場所を指定します。

複数のエントリポイントがある場合（たとえば、異なるページのコンポーネントを開発している場合）、 entry



次のように複数のファイルを転送できます。

  entry: { file1: "./src/file1.js", file2: "./src/file2.js" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

複数のバンドルを保存するには、 output



フィールドを変更しoutput



。

  output: { path: path.join(__dirname, "./dist"), filename: "[name].js" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、出力にはfile1.js



とfile2.js



2つのfile1.js



得られます。



基本的なセットアップが完了しました。 すべてが機能することを確認するには、タスクランナーからRun-Development



を実行しRun-Development



。





Run-Development



手動でRun-Development



するのは便利ではないため、webpackにファイルの変更を監視させます。 これを行うために、彼には--watch



モードがあります。 プロジェクトを開くたびに、このモードでwebpackが起動します。 行を追加する



/// <binding ProjectOpened='Watch - Development' />







webpack.config.js



の先頭までで、これでwebpack.config.js



です。 はい、とても簡単です！

ビルド結果の通知

アセンブリの結果に関するアラートを追加します。 WebpackNotifierPluginを使用します 。



次のコマンドを使用してインストールします。



npm install --save-dev webpack-notifier







webpack.config.js



ファイルを変更します

 var WebpackNotifierPlugin = require('webpack-notifier'); module.exports = { // ... plugins: [ new WebpackNotifierPlugin() ] };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アセンブリが正常に完了すると、デスクトップに次の通知が表示されます。









以上です。 Webpackにはライブリロードとプロファイリングもあります。次回はそれらを検討します。

ご清聴ありがとうございました。