webpack 4を進撃する(基本編一)

テーマ
本稿はwebpackの基礎部分であり、どのように0から工程環境を構築するかを目的とし、パッケージ化後にどのようなコードが生成されるかを簡単に紹介し、webpackの一般的な各種loaderを紹介します.
プロジェクト初期化
webpackをインストールする

yarn init -y

個人的にはyarn初期化項目で完成したら好きです.

yarn add webpack webpack-cli -D

また、目次にsrcファイルを新規作成して、ソースコードを入れるために、srcはindex.jsを作成します.今回のエントリファイルとしてindex.jsは何を入力してもいいですか?
現在のディレクトリで直接実行

npx webpack 

警告私達はmodeの指定を設定する必要があります.生産環境ですか?それとも開発環境ですか?
パッケージ化に成功し、ディレクトリの下でdistファイルを作成しました.
npxはnode_を探しに行きますmodules/.bin/webpack.cmdファイル
このファイルは現在のディレクトリにnode.exeがあるかどうかを判断し、現在のディレクトリのwebpack.jsをnodeで実行していないかを判断しました.一級上のwebpack.jswebpack.jsはwebpack-cli.jsを探します.webpack-cliのファイルディレクトリの下でconfig-yargs.jsの配置ファイルの中の要求事項を見つけられます.

.options({
            config: {
                type: "string",
                describe: "Path to the config file",
                group: CONFIG_GROUP,
                defaultDescription: "webpack.config.js or webpackfile.js",
                requiresArg: true
            },

ここでwebpackのデフォルトのプロファイルを説明します.webpack.co.nfig.jsまたはwebpackfile.jsという名前が必要です.ですから、私達はカスタムの名前で設定する必要があります.コマンドラインに自分でconfigを追加してwebpackを指定します.どの設定で包装しますか?

npx webpack --config [webpack-config path]
  

包装した後の書類
プロジェクトのルートディレクトリの下でファイルwebpack.co.nfig.jsを新規作成してエクスポートします.

const path = require('path')
module.exports = {
    mode:'development',  //         
    entry:'./src/index.js', //     
    output:{
        filename:'bundle.js', //        
        path:path.resolve(__dirname,'./dist')  //                 node path       
    }
}

再実行npx webpackこのbundle.jsの長さはどうですか?
しばらくほっといてくださいwebpack_リキュール上の属性を簡単に書いてください.
一つの自己実行関数が一つのobjに入ってきて、内部で自分で一つのrequire方法を定義して、requireの実行結果を返します.
Objのkeyはファイルを包装するパスで、valueは関数で、メソッドはevalでindex.js内部のコードを実行します.
ポイントはrequireが何をしましたか?
moduleIdは_u u uですwebpack_require_.s='/src/index.js'
キャッシュ{'./src/index.js'：...}が存在する場合、すなわちパッケージ化された場合、そのまま戻ってきます.ない場合はオブジェクトを作成します.

{
    i:moduleId,  //      
    l:false, //        
    exports:{}
}

そしてmoduleに引用し、modules[moduleId].callでmodulesを実行すると、一番外部から入ってきた自己実行関数のパラメータobj{'path':コードブロック}です.
このコードはこのOB jのコードブロックを実行するということで、コンテキストはmodule.exportを指して、moduleに入ってきます.module.exportは、require関数とパラメータをします.

(function(module, exports) {  // module     module（installedModules[moduleId]） ,exports  module.exports
      eval("console.log('webpack')

//# sourceURL=webpack:///./src/index.js?");
  })  

このコードが実行されると'webpack'が出力されます.
modules[moduleId].callすることは、着信モジュールmoduleIdに対応するコードを実行するだけです.
注:この時index.js内部にimportなどの他のモジュールを導入すれば、他のモジュールもobjのkeyとvalue形式に解析できます.彼は再帰的にrequireで解析します.
例えばindex.jsの中でimport a from./a.js'の彼のvalueはこのようです.

function(module, exports, require) {

"use strict";
eval("require.r(exports); 
    var a = require(\"./src/a.js\");   // a require      module.exports
    var a_default = require.n(a);  //            
    console.log('webpack')");
 }

require.rとは、exportで定義された属性を識別するものです.
require.nは、require.dを実行してモジュールを取得する方法であり、
require.dは、この関数に'a'を追加し、getter.aにアクセスするときにgetterを実行します.
最後に、このように繰り返して包装して最終的にmodule.exportを生成して戻ってきます.
module.lがtrueを変更すると、このmoduleはすでにパッケージ化されています.最後にmodule.exportsに戻ります.
次の予告:webpack.co.nfig.jsの配置