webpack入門教程(一)

注:本論文の重点は、webpack.config.jsをどのように構成し、対応する機能を実現するのではなく、webpackコンパイル前とコンパイル後のファイルを対比して、webpackパッケージ後のファイルはどのようにロードされて実行されるかを探究する.本明細書では、commonJSのモジュール化方式について議論する場合、webpackのパッキング作業を行う.討論を容易にするために、非常に簡単な例を用意しました.
ファイルa.js

module.exports ={
        say:function(){
            console.log('A is saying.');
        }
    }

ファイルb.js

module.exports ={
        say:function(){
            console.log('B is saying.');
        }
    }

ファイルindex.js

var a = require('./a');
var b = require('./b');
a.say();
b.say();

依存関係は非常に簡単で、すなわちindex.jsファイル依存性a.jsとb.jsの2つのファイルです.また、common JS方式で引用しています.私のconfigファイルも貼ってください.

var htmlPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        index:'./src/index.js'
    },
    output:{
        path:'builds',
        filename:'[name].js',
        chunkFilename:'chunk.[name].js'
    },
    plugins:[
        new htmlPlugin({
            filename:__dirname+'/builds/index.html',
            template:'./index.html'
        })
    ],
    devServer:{
        contentBase:'./builds',
        inline:true
    }
}

もう一つの非常に簡単なindex.htmlファイルがあります.

また、本質問のコード例はすでにGithubに載せられています.ここをクリックして確認してください.私たちはカタログの下でwebpackコマンドを実行します.buildsフォルダのファイルはwebpackで処理されたファイルです.私たちが検討するポイントです.ファイルディレクトリを見に来ました.builds里は、コンパイルされたファイルで、srcには、私たちのオリジナルファイルです.a.jsとb.jsは?builds/index.jsファイルに包装しました.包装とはこれをするもので、複数のファイルを一つまたは少数のファイルに統合します.私たちはbuilds/index.jsをつけて、コードが変更されたことを発見しました.みんなはここをクリックして完全なコードを見て、下は一部分です.

(function(modules){
    var installedModules = {};
    function __webpack_require__(moduleId) {/*  */}
    /*  */
    
    return __webpack_require__(0);
})([
//    index.js
function(module, exports, __webpack_require__){
    var a = __webpack_require__(1);
    var b = __webpack_require__(2);
    a.say();
    b.say();
},
//    a.js
function(module, exports){
    module.exports ={
            say:function(){
                console.log('A is saying.');
            }
        }
},
//    b.js
function(module, exports){
    module.exports ={
            say:function(){
                console.log('B is saying.');
            }
        }
}
])

上記のコードでは、私たちのindex.js、a.js、b.jsが一つの配列に入れられています.入口ファイル(index.js)は、配列の0の位置にあります.エントランスファイルの依存性(a.jsおよびb.js)は、依存する状況に応じて後席に配置されます.この配列はIIFの関数としてのパラメータmodulesとしてfunctionに入力される.匿名関数のreturn __webpack_require__(0);は、配列の最初の関数を実行します.
最初の関数:

   function(module, exports, __webpack_require__) {
    var a = __webpack_require__(1);
    var b = __webpack_require__(2);
    a.say();
    b.say();
 }

同前webpack_リキュール(1)つまり、行列の2番目の関数を実行します.
2番目の関数:

    function(module, exports) {
    
        module.exports ={
                say:function(){
                    console.log('A is saying.');
                }
            }
    
    }

第二の関数の実行後の結果は、module.exportsの内容を変数aに付与したものである.ここに来て、コードの構造は分かりましたが、肝心な__webpack_require__方法はどのように働きますか?コードを解析します.

    
    function __webpack_require__(moduleId) {
    
             // Check if module is in cache
             if(installedModules[moduleId])
                 return installedModules[moduleId].exports;
    
             // Create a new module (and put it into the cache)
             var module = installedModules[moduleId] = {
                 exports: {},
                 id: moduleId,
                 loaded: false
             };
    
             // Execute the module function
             modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    
             // Flag the module as loaded
             module.loaded = true;
    
             // Return the exports of the module
             return module.exports;
         }

ここでは、modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)行のコードに注意します.modulesは先ほど私たちが話した配列です.modulesは、モジュールのコンテキスト、すなわちmoduleである.したがって、もし私たちがmodule.exportsリガでthisという言葉を使ったら、最終的にはこれはindex.jsと同じです.さらに、this.name='jack'という属性にもアクセスできます.これは実際の役割ではなく、理解を深めるだけです.例えば、module.exports.name='jack'にいます.

    module.exports ={
            say:function(){
                console.log('A is saying.');
                console.log(module.id);
            }
        }

は、モジュールを出力することができるmodule.idです.もっと言ってください.もしa.jsを使うと、他のファイルに入れます.これはidより大きくなります.使用可能なwebpack-dev-server属性があります.私達のモジュールは初めて実行する時、idかmodule.loadedか、実行後にmodule.loadedに設定されます.たとえば、下記のコード:false

if (module.loaded) {
    var a = require('./a');
    a.say();
} else {
    var b = require('./b');
    b.say();

}

私達の例では、これは実行毎の結果であり、trueモジュールのコードを実行する度に初めて実行されるので、index.jsです.実際の開発では、現在のコードが初めて実行されるかどうかを判断する必要があります.もう一つ重要な変数があります.私たちがロードしたモジュールのB is saying.オブジェクトは、installed Modules[moduleId]に保存されます.このようにして、次回呼び出されたら、直接index.jsに戻ります.OKです.今回はここまでにします.学生たちの勉強を理解してください.