フロントエンドとモバイル開発のvue-day 5(2)

Webpackを実装するリアルタイムパッケージング構築コードを再修正するたびに、手動でwebpackパッケージングのコマンドを実行する必要があるため、面倒なので、webpack-dev-serverを使用してコードのリアルタイムパッケージングコンパイルを実現し、コードを修正すると自動的にパッケージング構築を行う.cnpm i webpack-dev-server--save-devを開発依存インストールにインストールした後、コマンドラインで直接webpack-dev-serverを実行してパッケージングを行い、エラーを発見した場合、package.jsonファイルのコマンドを借りてwebpack-dev-serverコマンドを実行する必要があり、scriptsノードの下に「dev」:「webpack-dev-server」コマンドを追加し、リアルタイムでパッケージングできることを発見した.ただしdistディレクトリの下にbundle.jsファイルは生成されません.これは、webpack-dev-serverがパッケージされたファイルをメモリに格納しているためです.
bundle.jsをメモリに置くメリットは、リアルタイムでコンパイルする必要があるため、メモリに置く速度が非常に速くなります.このとき、webpack-dev-serverにアクセスして起動します.http://localhost:8080/Webサイトでは、フォルダのパネルであることがわかりました.srcディレクトリの下をクリックしてから、indexのトップページを開く必要があります.bundle.jsファイルは参照されません.index.htmlのscriptのsrcプロパティを変更する必要があります:<script src="../bundle.js"></script>アクセスできるようにhttp://localhost:8080/の場合はindexのトップページに直接アクセスし、--contentBase srcコマンドを使用してdevコマンドを変更し、起動するルートディレクトリを指定できます.

"dev": "webpack-dev-server --contentBase src"

    index   script src   

html-webpack-pluginプラグインを して ページを する--contentBaseコマンドを するプロセスが であるため、 ディレクトリを する があります.また、index.htmlのscriptラベルのsrc を する があります.したがって、html-webpack-pluginプラグインを して ページを することをお めします.cnpm i html-webpack-plugin--save-devを し、 webpack.config.jsプロファイルをインストールするには、 のようにします.

//          
   var path = require('path');
   //       HTMl     
   var htmlWebpackPlugin = require('html-webpack-plugin');

   module.exports = {
       entry: path.resolve(__dirname, 'src/js/main.js'), //       
       output: { //       
           path: path.resolve(__dirname, 'dist'), //        
           filename: 'bundle.js' //         
       },
       plugins:[ //   plugins      
           new htmlWebpackPlugin({
               template:path.resolve(__dirname, 'src/index.html'),//    
               filename:'index.html'//     HTML     
           })
       ]
   }

package.jsonのscriptノードのdevコマンドを するには、 のようにします."dev": "webpack-dev-server"はindex.htmlのscriptラベルを します.html-webpack-pluginプラグインがbundle.jsをindex.htmlページに に するからです.