webpackのloader(四)

3554 ワード
loaderはモジュールのソースコードを変換するために使用されます.loaderはあなたをここに置くことができます.  import または「ロード」モジュールの場合は、ファイルを前処理します.したがって、他の構築ツールの「タスク」と同様に、処理先端構築ステップの強力な方法が提供される.loaderは、ファイルを異なる言語(Type Scriptなど)からJavaScriptに変換したり、インライン画像をdata URLに変換したりすることができる.loaderはJavaScriptモジュールに直接にいることを許可します.  import CSSファイル
例
//     loader
npm install --save-dev css-loader
npm install --save-dev ts-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' }, //    test  ，   use       。
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};
loaderを使う
あなたのアプリケーションでは、3つの方法があります.
  • 設定(推奨): webpack.co.nfig.js ファイルにloaderを指定します.
  • 内連結:各  import ステートメントで明示的にloaderを指定します.
  • CLI:shellコマンドでそれらを指定します.
    • 設定module.rules webpack構成で複数のloaderを指定することを許可します.これはloaderを示す簡明な方式で、コードを簡潔にするのに役立ちます.同時にあなたに各loaderに全体の概観を持たせます.
      module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
    インライン
    はい、あります  import ステートメントまたは任意の「import」に相当する方法でloaderを指定します.使用  ! リソースの中のloaderを分離します.それぞれの部分は現在のディレクトリに対して解析されます.
    import Styles from 'style-loader!css-loader?modules!./styles.css';
    すべてのルールを前にして使用します.  !は、構成にカバーされた任意のloaderに対応することができる.
    オプションは、クエリーパラメータ、例えば  ?key=value&foo=bar、またはJSONオブジェクト、例えば  ?{"key":"value","foo":"bar"}CLI
    CLIを通してloaderを使用する:
    webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
    これは正しいです  .jade ファイルの使用  jade-loaderです  .css ファイルの使用  style-loader 和  css-loaderloader特性
  • loaderは、チェーン伝達をサポートする.資源に対してラインを使うことができます.チェーンのセットのloaderは、写真の逆の順序で実行されます.loaderチェーンの最初のloaderは、次のloaderに値を返します.最後のloaderでwebpackが予想していたJavaScriptを返します.
  • loaderは同期であってもよく、非同期であってもよい.
  • loaderはNode.jsにおいて実行され、任意の可能な動作を実行することができる.
  • loaderはクエリパラメータを受信する.loaderに対して構成を伝達するために使用されます.
  • loaderも使用できます.  options オブジェクトを設定します.
  • は使用を除く.  package.json よくある  main 属性は、普通のnpmモジュールをloaderとして導き出すこともできます.  package.json で定義します  loader フィールド
  • プラグインは、loaderにより多くの特性をもたらすことができる.
  • loaderは、追加の任意のファイルを生成することができる.
    • loaderは前処理関数を通じて、JavaScript生態系にもっと多くの能力を提供します.ユーザは、圧縮、包装、言語翻訳、その他の詳細など、より柔軟に細かい粒度論理を導入することができる.
    解析リーダー
    loaderモジュールは関数として導出し、Node.js互換のJavaScriptを用いて作成する必要がある.通常はnpmで管理していますが、アプリケーション内のファイルとしてユーザー定義のloaderを使用することもできます.約束によって、loaderは通常名前が付けられます.  xxx-loader(例えば  json-loader)詳細については、ご確認ください. どうやってloaderを作成しますか?
    JavaScriptの中のいくつかの小さい穴を覚えます.