式でステートメントを必要と

あなたはパラメータが表現（表現）を含有する必要がある場合は、コンパイル時に（コンパイル時）特定のモジュールがインポートされている明確ではないので、それは、コンテキスト（文脈）を作成します

（必要" ./template/ " +名+ " .ejs "）;

WebPACKの（）の呼び出しを必要と解決し、以下の情報が抽出されました：

ディレクトリ：./ テンプレート
正規表現： /^.*\.ejs$/

これは、サブディレクトリを含め、モジュール.ejsを参照するためのテンプレートディレクトリ内のすべてのサフィックスを返します。

require.context

あなたがあなた自身の（モジュール）コンテキストを作成するためにrequire.context（）メソッドを使用することができ、この方法は、次の3つのパラメータがあります。

ファイルフォルダのディレクトリを検索するには
、それはまた、サブディレクトリを検索するかどうかを指定
そして、正規表現にマッチするファイル。

  require.context（ディレクトリ、useSubdirectories = falseを、正規表現= / ^ \ \。// ）
 

  require.context（" ./test "、偽、/\.test\.js$/ ）;
   // （作成）Aこれは、以下の（サブディレクトリは含まない）テストフォルダが含まれている、.test.js` `で終わるすべてのファイルのコンテキスト、およびファイルへの要求を必要とすることができます。
 

  require.context（" ../ "、trueに、/\.stories\.js$/ ）;
   //は、（作成）以下（サブディレクトリを含む）親フォルダが含まれている、すべてのファイル名.stories `へファイルの最後のコンテキストを.js`。

require.contextエクスポートモジュール（リターン）（必要）機能、この関数は、1つのパラメータを取ります：リクエスト機能を-要求は、ここに参照する（式文を要求すべきです）

解決、キー、ID：属性をエクスポートするには、3つの方法があります。

解決が得られたリクエストIDモジュールが解決される返す関数です。
キーは、モジュール構成要素によって処理することができるすべてのコンテキストリクエストの配列を返す関数です。
IDは、モジュールIDが含まれているコンテキストモジュールである。あなたがmodule.hot.acceptを使用する場合に使用することができます

Vueのグローバルコンポーネント：

= module.exports.install 関数（ヴュ）{
  / * 
   ./componentsですべてのコンポーネントが自動的にグローバルディレクトリアセンブリに登録.vue 
   に<MV - ***> </ MV - ***> 、名前タグアセンブリであります*** .nameのアセンブリは、何名がファイル名のコンポーネントではない場合には、
  * / 

 CONST requireAllコンテキスト= => context.keys（）地図（コンテキスト）;. 

 CONST成分= require.context（' ./components '、falseに、/\.vue$/ ）;
  // CONST = require.context指令（」./ディレクティブ、falseに、/\.js$/）; 

 requireAll（成分）.forEach（（項目） => {
    CONST名=（item.name、|| /（\ S + \ /）（\ S +）\ VUE / .exec（item.hotID）のための[ 2 toLowerCaseメソッド（）]）; 
   Vue.component（ `ミュージックビデオ- $ {名前} '、項目）。
 }）; 

}。

/ * * 
*ファイルには、すべてのvuexのモジュールをインポートするには、 `@ /店舗/ index.js`可能
ワンショット的に*を。このファイルを編集するにはどのような理由があってはなりません。
* / 

constのファイル= require.context（' ./modules '、偽、/\.js$/ ）
はconsole.log（' ------------ ' ）
はconsole.log（files.keys （））
はconsole.log（' ------------ ' ）
 CONSTモジュール= {} 

files.keys（）。forEachの（キー => { 
   モジュール[key.replace（ /（\ \ /|\.js)/g、''）] =ファイル（キー）。デフォルト
}）

はconsole.log（' ------------ ' ）
はconsole.log（モジュール）
はconsole.log（' ------------ ' ）
の輸出デフォルトモジュール

以下のすべてのSVG SVGファイルを導入するには、次の新しいJSファイルindex.jsファイル（アイコン）のディレクトリに以下のコードを記述し作成します。

requireAll = requireContext =>聞かせrequireContext.keys（）。マップ（requireContext）
REQましょう = require.context（' ./svg '、偽、/\.svg$/ ）
requireAll（REQ）を

Vueのグローバル部品

constの requireAllコンテキスト= => context.keys（）マップ（コンテキスト）;. 

constのコンポーネント= require.context（' ./components '、falseに、/\.vue$/）;    // falseにサブディレクトリを横断していない、真のトラバーサルサブディレクトリ


requireAll（成分）.forEach（（{ デフォルト：アイテム}）=> { 
    にconsole.log（項目）
    Vue.component（WB ' - 、アイテムの$ {} `item.name）; 
}）;

資産計上

Object.keys（成分）.forEach（（キー）=> {
     VARの名= key.replace（/（\ W）/（V）=> v.toUpperCase（））// 首字母大写
    Vue.component（ ` V $ {名前} '、成分[キー]）
}）

Require.context使用ディレクトリトラバーサルの写真

G：\コード\ヴュー\ vue- グローバル -componentのsrc \資産>ツリー/ \ Fの
ボリューム他のフォルダリストのPATHの
ボリュームシリアル番号1081 - 0973 
G：。
│logo.png 
└─kittens 
        kitten1.jpg 
        kitten2.jpg 
        kitten3.jpg 
        kitten4.jpg

<テンプレート> 
    <DIV ID = " アプリケーション" > 
        <IMG SRC = " @ /資産/ logo.png " > 
        <LIのV- ため = " 画像内の項目" > 
            <H3>イメージ：{{アイテム}} </ H3 > 
            <IMG：SRC = " imgUrl（アイテム）" > 
        </ LI> 
    </ div> 
</テンプレート> 

<スクリプト> VAR imagesContext = require.context（' @ /資産/子猫/ '、偽、/\.jpg $ / ）;
    console.log（imagesContext）
    
    console.log（imagesContext（./kitten1.jpg " ））
    はconsole.log（imagesContext.keys（））
    のエクスポートデフォルト{ 
        作成：関数（）{ この .imagesの=のimagesContext.keys（）; 
        }、
        名称：' 母' 、
        データ（）{ リターン{ 
                イメージ：[]、
                MSG：' あなたVue.jsアプリへようこそ' 
            } 
        }、
        {メソッド
            imgUrl：機能（パス）{ // はconsole.log（」パス：」+パス）; リターン "
            
            
                
                imagesContext（パス）
            } 
        } 
    }
 </ SCRIPT> 

<スタイル> 
    #app { 
        フォント -family：' アベニール'、ヘルベチカ、のArial、sans- セリフ。
        -webkit-font- スムージング：アンチエイリアス。
        -moz-OSX-font- スムージング：グレースケール。
        テキスト - 揃える：センター; 
        色：＃2c3e50。
        マージン - トップ：60PX; 
    } 
    
    H1、
    H2 { 
        フォント - 重量：正常; 
    } 
    
    UL { 
        リスト -style-タイプ：なし。
        パディング：0 ; 
    } 
    
    のLi { 
        表示：インライン - ブロック。
        マージン：0 10pxの; 
    } 
    
    { 
        色：＃42b983。
    }
 </スタイル>

インポートヴューから ' VUE ' 

 

関数capitalizeFirstLetter（文字列）{ 

  戻り 列 .charAt（0）.toUpperCase（）+ ストリング .slice（1 ）

} 

 

CONST requireComponent = require.context（

  ' '、偽、/\.vue$/ // 找到成分文件夹下以.vue命名的文件
）
requireComponent.keys（）。forEachの（ファイル名は => { CONST componentConfig = requireComponent（filename）でCONSTコンポーネント名= capitalizeFirstLetter（

   


 


  

 

  

    （fileName.replace。/ ^ \ \ // 、 ''）.replace（/ \ \ W + $ /、。 ''）

    // 結果のファイル名の形式であるため'./baseButton.vue'、ので、ここで我々は削除頭と尾、唯一の実際のファイル名を残す

  ）

 

  Vue.component（コンポーネント名、componentConfig。デフォルト || componentConfig）

}）

Vueのインポートから ' VUE ' 
LETコンテキスト = require.context（' '、falseに、/\.vue$/ ）
contexts.keys（）。forEachの（コンポーネント => { 
  のlet componentEntity =コンテキスト（コンポーネント）。デフォルト// 使用組み込みコンポーネント名登録グローバル成分  Vue.component（componentEntity.name、componentEntity）
}）

require.context

式でステートメントを必要と

require.context

Vueのグローバル部品

資産計上

Require.context使用ディレクトリトラバーサルの写真

おすすめ