Webpack-R-reesolve

2795 ワード
webpack
Resolive webpackは起動後、設定されたエントリモジュールからすべての依存モジュールを探し出します.Resove設定webpackはモジュールに対応するファイルを探しています.webpackにはJavaScriptモジュール化文法解析機能が内蔵されています.デフォルトではモジュール化の基準で定められた規則を使って探していますが、自分の必要に応じてデフォルトのルールを変更することができます.
  • alias
    • resovel.alias構成項目は別名によって従来の導入経路を新たな導入経路にマッピングする.以下のとおりです
    //webpack alias  
resolve: {
    alias: {
        componets: './src/components/'
    }
}
    imponents/buttonを介して導入されると、実際にはAlias等価によってimport Button from(./src/components/button)に置き換えられます.
    以上のalias配置の意味は、導入文のcomponentsキーワードを.src/componentsに置き換えることです.
    これ
    このようにすると多すぎる導入文に命中する可能性があります.aliasはまた$記号をサポートして範囲を縮小します.キーワードで終わる導入文だけに命中します.
    resolve: {
    alias: {
        'react$' : '/path/to/react.min.js'
    }
}
    このようにreact$はreactで終わる導入文だけに命中します.つまりimport reactキーワードをimport'/path/to/react.min.js'に置き換えます.
  • manFields
    • いくつかの第三者モジュールが異なる環境に対していくつかのコードを提供します.例えば、ES 5とES 6を採用した2つのコードがそれぞれ提供され、この2つのコードの位置はpackage.jsonファイルに記載されています.
    {
    "jsnext: main": "es/index.js", //  ES6         
    "main": "lib/index.js"//  ES5         
}
    webpackは、manFieldsの構成によって、有限採用のコードを決定します.manFieldsのデフォルトは以下の通りです.
    mainFields: ['browser', 'main']
    webpackは配列の順にpackage.jsonファイルの中を探しに行きます.見つけた一番目だけを使います.
    ES 6のコードが欲しいなら、このように配置してもいいです.
    mainFields: ['jsnext:main', 'browser', 'main']
  • extensions
    • 導入文にファイルの拡張子がない場合、webpackは自動的に拡張子を付けてファイルの存在を確認します.レゾルベ.extensionsは、試行の過程で使用するサフィックスリストを構成するために使用されます.デフォルトは次の通りです.
    extensions:['.js', '.json']
    つまり、require('./data')という導入文があったら、webpackは先に探しに行きます.
  • modules
    • resove.modulesはwebpackを設定して、どのカタログの下で第三者のモジュールを探しますか?デフォルトはノドに行くことですmodulesディレクトリの下で探します.あなたのプロジェクトには他のモジュールに多く依存して導入されるモジュールがあります.他のモジュールの位置分布が不安定なため、異なるファイルに対して導入されたモジュールファイルの相対パスを計算します.このパスは時には長いです.例えば、import'/…/components/button'はmodulesの配置項目を利用して最適化できます.大量に導入されたモジュールがあれば.
    modules:['./src/components', 'node_modules']
  • description Files
    • resolive.description Filesは、第三者モジュールのファイル名、つまりpackage.jsonファイルを構成しています.デフォルトは以下の通りです
    descriptionFiles: ['package.json']
  • enforceExtension
    • resove.enforceExtensionがtrueに設定されている場合、導入されたすべてのステートメントはファイルの拡張子を持つ必要があります.
  • enforceModuleExtension
    • enforceModuleExtensionとenforceExtensionの役割は似ていますが、enforceModuleExtensionはnode_だけです.modules下のモジュールは有効です.enforceModuleExtensionは通常、enforceExtensionと組み合わせて使用します.enforceExtension:trueでは、インストールされたサードパーティモジュールのほとんどの導入文はファイルの拡張子を持っていないので、この時はenforceModuleExtension:falseを構成することでサードパーティモジュールと互換します.
    ソース:https://segmentfault.com/a/1190000013176083?utm_source=tag-newest
    最低金券問題のJavaScript解法