webpackでプロジェクト作成（アセット管理）

10759 ワード
webpack webpack テキストリンク

webpackでプロジェクト作成（アセット管理）

Getting Started　
Asset Management (←今回はコレ)
Output Management
Development

前回作成したプロジェクトに画像などのアセットを追加していく。

追加したアセットがどのようにページに表示されるかを順を追って理解する。

CSSファイルを読み込むまでの流れ

JSファイル内でCSSファイルを読み込む流れは、

  1. HTML出力用のタグをbundle.jsに変更する
  2. css用のlodashをインストールする
  3. webpack.config.jsでbundle.jsをアウトプットにし、loaderを読み込む

ここまでで下準備完了。

  1. style.cssを作成する
  2. index.js内でstyle.cssを読み込み、cssクラスとして出力する

エントリーポイントの変更

前回のプロジェクトで、index.jsをエントリーポイントにしてmain.jsをアウトプットを作成したが、これをbundle.jsに変更する。

webpack.config.jsのoutputに記述したファイルは自動生成される。

CSS用のloaderのインストール

ローダーをインストールすることで、.cssファイルをjsの中に読み込むことができる。

npm install --save-dev style-loader css-loader

・--save-dev: devDependenciesとしてインストール
・style-loader: JS内のCSSをHTMLとして出力する
・css-loader: JS内でCSSを使用できるようにする。便利なオプション設定もある。

webpack.config.jsを変更する

インストールしたloaderを使用するため、webpack.config.jsファイルに追記する。

   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader',
         ],
       },
     ],
   },
  };

loaderはチェーンとして繋がっていき、webpackがすべてを読み込んだあとで実行される。

そのためmoduleオプションの中に記述するloaderの順番が重要で、style-loader、css-loaderの順でないとエラーになる。


CSSファイルの作成

src/style.cssを作成し、簡単なコードを追記する。


src/index.jsにcssをインポートする

npm run buildでwebpackをリロードする。

dist/index.htmlを開くと、「Hello webpack」が赤色で表示される。


画像ロード用のloaderをインストールする

npm install --save-dev file-loader


webpack.config.jsでfile-loaderをロードする。

moduleオプションのrulesの中に以下を追記する。

webpack.config.js
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader',
         ],
       },

これを記述することで、画像ファイルが読み込まれ、distディレクトリに出力される。ハッシュ値で出力される。


画像ファイルの追加と読み込み

srcディレクトリ内に画像を追加し、index.jsに出力のための追記する。


cssに背景画像として追加

src/style.css
 .hello {
    color: red;
   background: url('./icon.png');
  }

npm run build

再読み込み。dist/index.htmlを開くと背景画像が表示される。


フォントのローディング

先ほど画像を読み込んだfile-loaderは、画像以外のファイルも読み込むことが可能。

testで読み込むファイルを正規表現で指定する。
moduleのrulesに以下を追記。

webpack.config.js
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: [
           'file-loader',
         ],
       },


フォント用のフォルダを作成する


cssファイルにフォントを追加する。

src/style.css
 @font-face {
   font-family: 'MyFont';
   src:  url('./my-font.woff2') format('woff2'),
         url('./my-font.woff') format('woff');
   font-weight: 600;
   font-style: normal;
 }

  .hello {
    color: red;
   font-family: 'MyFont';
    background: url('./icon.png');
  }


データのローディング

JSON,CSV, XMLファイルのデータをローディングすることができる。

今回は、csvとxmlのローダーをインストールする。
いつものごとく、ローダーをインストールしたら、webpack.config.jsのmoduleオプションのrulesに、test, use, loader名を追記する。

npm install --save-dev csv-loader xml-loader
webpack.config.js
      {
         test: /\.(csv|tsv)$/,
         use: [
           'csv-loader',
         ],
       },
       {
         test: /\.xml$/,
         use: [
           'xml-loader',
         ],
       },


サンプル用のxmlを準備する。

src/data.xml
<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>


src/index.htmlにインポートする


componentsディレクトリの作成

今更感はあるが、直感的なわかりやすさのために、ブラウザの表示に使われるデータをassetsからcomponentsフォルダに移動する。



外部データの取り込み方法は以上。
パッケージをインストールし、configファイルで読み込み、index.jsファイルに記述するのが基本的な流れとなる。