webpack入門_asset management

前回に引き続き今回はassetファイルを扱いたいと思います。

cssファイルの読み込み

以下のコマンドでcssファイルを読み込めるようにします。

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

以前は--save-devではなく--saveを利用しましたが、--save-devは開発時に必要になるテスト用ライブラリやlinter,ファイルのローダーなどで--saveはビルド後の生成物に含める必要があるライブラリを指定します。
それからwebpack.config.jsのrulesを修正し、以下のようにします。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

これでwebpack側がcssファイルを扱える準備が済んだのでcssファイルの作成と読み込みを行います。 asset/style.css

.hello {
  color: red;
}

src/index.js

import _ from 'lodash';
import '../asset/style.css';

function component() {
  var element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  return element;
}

document.body.appendChild(component());

あとは以前と同じようにビルドしてindex.htmlをブラウザで表示したらhello webpackが赤文字で表示されるはずです。

npm run build
open index.html

画像の読み込み

以下のコマンドで画像をfile-loaderを依存関係に追加します。

npm install --save-dev file-loader

webpack.config.jsを修正して画像用のruleを追加します。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]

  }
};

index.htmlはdist/index.htmlに配置します。 dist/index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

あとはsrc/index.jsで画像を読み込んでみます。

import _ from 'lodash';
import '../asset/style.css';
import Icon from '../asset/icon.png';

function component() {
  var element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  var myIcon = new Image();
  myIcon.src = Icon;
  element.appendChild(myIcon);
  return element;
}

document.body.appendChild(component());

cssでbackgroundに画像を指定する場合は以下のようになります。

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

あとはビルドしてdist/index.htmlをブラウザで開けば結果が確認できます。

npm run build
open dist/index.html

ビルド後の画像はdistディレクトリに出力され、ファイル名が長い文字の羅列に変わっています。

データファイルの読み込み

nodejsではcsv,tsv,xml読み込み用のローダーが作られていますので試してみたいと思います。
ライブラリインストール

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

それから以下のxmlファイルを作成します。 asset/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.js内でxmlを読み込んでconsoleに出力してみます。

import _ from 'lodash';
import '../asset/style.css';
import Icon from '../asset/icon.png';
import Data from '../asset/data.xml';

function component() {
  var element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  var myIcon = new Image();
  myIcon.src = Icon;
  element.appendChild(myIcon);

  console.log(Data);

  return element;
}

document.body.appendChild(component());

あとはこれまで同様ビルドしてdist/index.htmlをブラウザで開いた後開発者モードでコンソールをみたら結果が確認できます。

npm run build
open dist/index.html