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

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

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

[前回作成したプロジェクトに](https://qiita.com/yuta-38/items/953faff19587b3a2f8c6)画像などのアセットを追加していく。

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



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

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

ここまでで下準備完了。

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/39e290f0-d852-ce76-62b2-0f7148c16049.png)


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の順でないとエラーになる。


<br>
##CSSファイルの作成

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/c18d1103-bef3-7794-7f2a-b8d64aac9b35.png)



<br>
##src/index.jsにcssをインポートする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/86e71d44-597b-3fb9-fe53-bd62b7b17fca.png)


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

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




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

```
npm install --save-dev file-loader
```


<br>
##webpack.config.jsでfile-loaderをロードする。
moduleオプションのrulesの中に以下を追記する。

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/50210845-eb79-7315-5cbd-71b3ffb1be9e.png)



<br>
##画像ファイルの追加と読み込み
srcディレクトリ内に画像を追加し、index.jsに出力のための追記する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/e90e0b01-676a-64b4-6d6a-32e2b5735dad.png)


<br>
##cssに背景画像として追加

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

`npm run build`

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



<br>
##フォントのローディング
先ほど画像を読み込んだfile-loaderは、画像以外のファイルも読み込むことが可能。

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

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


<br>
##フォント用のフォルダを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7fd186f8-3801-9686-2386-682dbbc9bac4.png)



<br>
##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');
  }
```



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

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


```
npm install --save-dev csv-loader xml-loader
```

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


<br>
##サンプル用の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>
```

<br>
##src/index.htmlにインポートする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/e6309f9d-5e10-0bdd-44aa-159eb2dfc1fb.png)



<br>
##componentsディレクトリの作成
今更感はあるが、直感的なわかりやすさのために、ブラウザの表示に使われるデータをassetsからcomponentsフォルダに移動する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/3b327131-a1fc-6293-2454-2921dccdf66d.png)





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