webpack入門2 ~Asset Management~ #JavaScript

はじめに

webpack入門その2です。今回はAsset ManagementということでCSSのbundleをやっていきます。
前回のプログラムに変更を加える形で進めていきます。

Setup

ページタイトルを今回の内容に合わせるマイナーチェンジを行います。
(やらなくても全然OKです)

dist/index.html

<html>
  <head>
    <title>Asset Management</title>
  </head>
  <body>
    <script src="./bundle.js"></script>
  </body>
</html>

Loading CSS

js以外をbundleするにはloaderと呼ばれるものが必要となりますので以下をyarnで追加します。

$ yarn add --dev style-loader css-loader

style-loaderとcss-loaderの役割はざっくり以下になります。

style-loader：cssをhtml上で読み込めるようにします。
css-loader：cssをjs上で読み込めるようにします。

webpack.config.js

const path = require('path');

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

次にcssを追加します。

src/style.css

.hello {
  color: red;
}

次にindex.jsをcssインポートしてそのcssのクラスを使用するよう変更します。

src/index.js

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

function component() {
  var element = document.createElement('div');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  return element;
}

document.body.appendChild(component());

これで準備完了です。ビルドしてみましょう。

$ yarn run build
yarn run v1.0.1
$ webpack
Hash: 16af218796ef6b52ac0c
Version: webpack 3.5.6
Time: 931ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  560 kB       0  [emitted]  [big]  main
   [0] ./src/index.js 272 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
   [4] ./src/style.css 1 kB {0} [built]
   [5] ./node_modules/css-loader!./src/style.css 191 bytes {0} [built]
    + 4 hidden modules
✨  Done in 1.83s.

無事ビルドされました。
ブラウザで確認すると文字が赤くなっていたのでちゃんとスタイルが当たっているようです。
bundleされたソースを見てみるとcss部分は以下のようになっていました。

dist/bundle.js

// module
exports.push([module.i, ".hello {\n  color: red;\n}\n", ""]);

以上でおしまいです。

おわりに

今回のcssのbundleについてはこれで終了です。使うloaderとwebpack.config.jsに記述するところが重要だと思います。
画像も同じくbundleしてjs上で使えるようにできるみたいなので機会があったらやってみようと思います。
次はOutput Managementを進めます。