webpackマルチページアプリケーションアーキテクチャシリーズ(六):webpackは画像やフォントもパッケージ化できるそうです.

7740 ワード

本論文はArrayに先発した.Huangの技術ブログ-- 、作者の同意を得ないで、転載しないでください.原文住所:https://segmentfault.com/a/1190000006907701このシリーズの文章に興味がある場合は、こちらへようこそ:https://segmentfault.com/blog/array_huang

前言

下一篇《webpack连less/css也能パッケージ吗?》loaderを使用してCSSをロードするといえば、他のタイプのリソースをどのように一般的にロードするかについて説明します.なぜ「大まか」を強調するのか.これは、本明細書で紹介する方法は、どのタイプのリソースにも適用されないためです.これは、どのタイプのリソースでも使用できることを意味しますが、効果も限られています.

どんなloaderを使っていますか?

この論文では、2つのloader:file-loaderとurl-loaderを紹介します.

file-loader

file-loaderの主な機能は、ソースファイルを指定したディレクトリに移行し(ソースファイルディレクトリからbuildディレクトリに移行すると簡単に理解できる)、新しいファイルのパスを返すことです(簡単につなぎ合わせてできます).
file-loaderは、次の変数を受け入れるnameパラメータを入力する必要があります(ソースファイルsrc/public-resource/imgs/login-bg.jpg、ルートディレクトリ内でwebpackコマンド、すなわち現在のコンテキスト環境がsrcディレクトリと同等であることを前提とします).

[ext]:ファイルの接尾辞名.例は「jpg」である.

[name]:ファイル名自体、例は「login-bg」です.

[path]:現在webpackコマンドが実行されているディレクトリに対する相対パス(ファイル名自体を含まない).例は'src/public-resource/imgs/'です.このパラメータは、移行後のファイルをソースファイルのディレクトリまたはサブディレクトリに戻す必要がない限り、あまり役に立たないと思います.

[hash]:ソリューションをキャッシュするためのソースファイルコンテンツのhash.

私のやり方は、require('!file-loader?name=static/images/[name].[ext]!../imgs/login-bg.jpg')、このようにlogin-bg.jpgの経路はstatic/images/login-bg.jpgになって、これはまだ完全な経路ではないことに注意して、最終的にはやはりwebpack配置の中のoutput.publicPathパラメータをつづります;例えば、私のoutput.publicPathパラメータが../../../../build/であれば、最終的にrequire()から得られる完全な経路は../../../../build/static/images/login-bg.jpgになります.

url-loader

url-loaderの主な機能は、ソースファイルをDataUrl(宣言ファイルmimetypeのbase 64符号化)に変換することです.私の知る限りでは、フロントエンドカテゴリーでは、画像とフォントファイルのDataUrlはブラウザで認識できるので、画像とフォントをDataUrlに変換してHTTP接続数を減らすことができます.
url-loaderは主に以下のパラメータを受け入れます.

limitパラメータ、データ型は整数型で、ターゲットファイルの体積が何バイトより大きいかを示すにはfile-loaderで処理し、記入しないとfile-loader処理に渡されません.例えばrequire("url?limit=10000!./file.png");は、ターゲットファイルが10000バイトより大きい場合、file-loader処理に渡されることを示す.

mimetypeパラメータは、前述したようにDataUrlはファイルのmimetypeを宣言する必要があるので、このパラメータでmimetypeを強制的に設定することができ、記入しないとデフォルトでターゲットファイルの接尾辞名から判断します.例えばrequire("url?mimetype=image/png!./file.jpg");は、jpgをpngとして強制的に使用します.

file-loaderのすべてのパラメータは、file-loaderが有効になっている間にfile-loaderに渡されます.たとえば、最も重要なnameパラメータなどです.

実演

次に、url-loaderとfile-loaderを使用してさまざまなリソースをロードする方法について、私の足場プロジェクトwebpack-seedを使用して説明します.

画像

これは私が直接webpackプロファイルに設定したものです.

        {
          //      ，  file-loader，     ，          base64，  http  
          //     ，   8192byte     base64 
          test: /\.(png|jpg|gif)$/,
          loader: 'url-loader?limit=8192&name=./static/img/[hash].[ext]',
        },

[hash]を使用しているため、異なるページで同じ名前が引用されても実際の内容が異なる画像でも「上書き」されることはありません.さらに、異なるページが異なる場所で実際の内容が同じ画像を参照している場合は、ブラウザのキャッシュに便利な画像にまとめることもできます.

フォントファイル

このブロックは私も直接webpack構成で構成されています.

        {
          //   iconfont     ，         ，       
          test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
          loader: 'file?name=./static/fonts/[name].[ext]',
        },

声明が必要なのは、私がアリのお母さんのiconfontスキームを使っているため、このスキームはフォントファイルをロードする方法が少し特殊なので、正則的に一致するときは注意しなければなりません.iconfontのCSSはこのようにしています.見てください.

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1473142795'); /* IE9*/
  src: url('iconfont.eot?t=1473142795#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1473142795') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1473142795') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1473142795#iconfont') format('svg'); /* iOS 4.1- */
}

その他のリソース

なぜ他のリソースを移す必要があるのかと聞かれるかもしれません.直接引用すればいいのではないでしょうか.
私も以前はそうしていましたが、ソースファイルディレクトリsrcのリソース、例えばwebuploaderで使用されているswfファイル、例えばIEと互換性があり、パッケージを必要としないjsファイルを直接引用しました.しかし、その後、このようにすると、配置がオンラインになったときにbuildディレクトリとsrcディレクトリを同時に置くことに気づきました.また、buildディレクトリとsrcディレクトリが同級であるため、buildディレクトリとsrcディレクトリの上位ディレクトリしかウェブサイトのルートディレクトリとして使用できない(buildディレクトリをウェブサイトとすると、ユーザーはsrcディレクトリを読み取ることができないため)、いずれにしても各種類の不便である.
では、私はどうやってやったのでしょうか.build-file.config.jsというconfigファイルを作成しました.内容は以下の通りです.

module.exports = {
  js: {
    xdomain: require('!file-loader?name=static/js/[name].[ext]!../../../vendor/ie-fix/xdomain.all.js'),
    html5shiv: require('!file-loader?name=static/js/[name].[ext]!../../../vendor/ie-fix/html5shiv.min.js'),
    respond: require('!file-loader?name=static/js/[name].[ext]!../../../vendor/ie-fix/respond.min.js'),
  },
  images: {
    'login-bg': require('!file-loader?name=static/images/[name].[ext]!../imgs/login-bg.jpg'),
  },
};

このconfigファイルは2つの役割を果たします.

このconfigファイルにロードされるたびに、require()文が実行され、ターゲットファイルが転送されます(srcディレクトリからbuildディレクトリ).

ターゲットファイルのコードセグメントを呼び出し、このconfigファイルからターゲットファイルの転送後の完全なパスを取り出すことができます.例えば、私はsrc/public-resource/components/header/html.ejsでこのように使用しています.




  
  
    -  XXXX

うん、このHTMLでjsの値を直接引用できるのか気になるかもしれませんが、ハハハ、アウトラインを超えました.これは私が後で話したい内容です.

サンプルコード

皆さんはこのシリーズの文章を読んで、私のGithubの足場のプロジェクトと組み合わせて食べるのがもっといいですよ(笑):Array-Huang/webpack-seed(https://github.com/Array-Huang/webpack-seed).

添付記事カタログ(同期更新)

webpackマルチページアプリケーションアーキテクチャシリーズ(一):アーキテクチャの痛みを一歩一歩解決する

webpackマルチページアプリケーションアーキテクチャシリーズ(二):webpack構成の一般的な部分はどれらがありますか?

webpackマルチページアプリケーションアーキテクチャシリーズ(3):共通コードをどのようにパッケージ化すれば重複を避けることができますか?

webpackマルチページアプリケーションアーキテクチャシリーズ(四):古いjQueryプラグインはまだなくてはいけません.どうやって互換性がありますか?

webpackマルチページアプリケーションアーキテクチャシリーズ(五):webpackはless/cssでもパッケージできるそうですか?

webpackマルチページアプリケーションアーキテクチャシリーズ(六):webpackは画像やフォントもパッケージ化できるそうです.

webpackマルチページアプリケーションアーキテクチャシリーズ(七):開発環境、生産環境がバカで分からない?

webpackマルチページアプリケーションアーキテクチャシリーズ(八):監督ES 6を書きます!WebpackはどのようにBabelを統合しますか?

webpackマルチページアプリケーションアーキテクチャシリーズ(九):いつも刁民が朕を害したい!ESLintはあなたのためにゴミコード

を阻止します

webpackマルチページアプリケーションアーキテクチャシリーズ(10):カスタムbootstrap

を作成する方法

webpackマルチページアプリケーションアーキテクチャシリーズ(十一):Dllをプリパッケージし、webpack音速コンパイル

を実現する

webpackマルチページアプリケーションアーキテクチャシリーズ(十二):webpackを利用してHTML普通ページ&ページテンプレート

を生成する

webpackマルチページアプリケーションアーキテクチャシリーズ(十三):簡単なテンプレートレイアウトシステム

を構築する

webpackマルチページアプリケーションアーキテクチャシリーズ(14):Noコピー貼り付け!マルチプロジェクト共用インフラストラクチャ

webpackマルチページアプリケーションアーキテクチャシリーズ(十五):フロントエンドがバックエンドレンダリング開発モードでどのようにスリット生存するかについて

asp.Netでgridviewに自動シーケンス番号を追加

css四列レイアウト中間空白テクニック