[webpack] webpack 2 入門: CSS や image を bundle する

公開日: 2017/06/06
更新日: 2018/10/04

CSS や image ファイルも webpack で JavaScript に bundle します。

こちらを参考にさせて頂きました。

Contents

Installation

css や image を扱うための loader をインストールします。

% yarn add --dev css-loader style-loader url-loader

ここではサンプルとして slick というカルーセル機能を提供するライブラリをインストールします。

% yarn add slick-carousel jquery

webpack.config.js

css と image の設定を追加します。

webpack.config.js
module.exports = {
    :
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.(gif|png|jpg|eot|wof|woff|ttf|svg)$/,
        use: [
          { loader: 'url-loader' },
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack App',
      template: 'app/index.html'
    })
  ]
};

上記では HtmlWebpackPlugin のテンプレート機能を利用して、HTML を生成しています。

Usage

slick 用の <div> タグを追加しておきます。
JavaScript の読込を追加すれば、生の HTML ファイルでも構いません。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div class="your-class">
      <div>your content 1</div>
      <div>your content 2</div>
      <div>your content 3</div>
    </div>
  </body>
</html>

JavaScript ファイルに slick の JavaScript と CSS を読み込みます。

app/index.js
import $ from 'jquery';
import 'slick-carousel';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
$('.your-class').slick();

webpack コマンドでファイルが bundle されます。

% $(yarn bin)/webpack
Hash: bc9e5470b284c8a7fac4
Version: webpack 2.6.1
Time: 4213ms
     Asset       Size  Chunks                    Chunk Names
vendors.js     792 kB       0  [emitted]  [big]  vendors
    app.js     398 kB       1  [emitted]  [big]  app
index.html  419 bytes          [emitted]
 [116] ./~/jquery/dist/jquery.js 268 kB {1} [built]
 [118] ./app/console.js 46 bytes {1} [built]
 [119] ./app/index.js 2.71 kB {1} [built]
 [120] ./~/babel-polyfill/lib/index.js 833 bytes {0} [built]
 [121] ./~/lodash/lodash.js 540 kB {0} [built]
 [122] ./app/lib/person.js 356 bytes {1} [built]
 [123] ./app/vendors.js 221 bytes {0} [built]
 [124] ./~/core-js/fn/regexp/escape.js 107 bytes {0} [built]
 [304] ./~/core-js/shim.js 7.38 kB {0} [built]
 [308] ./~/regenerator-runtime/runtime.js 24.4 kB {0} [built]
 [310] ./app/stylesheets/style.css 1.01 kB {1} [built]
 [311] ./~/slick-carousel/slick/slick-theme.css 978 bytes {1} [built]
 [312] ./~/slick-carousel/slick/slick.css 960 bytes {1} [built]
 [318] (webpack)/buildin/module.js 517 bytes {0} [built]
 [319] multi ./app/index.js ./app/console.js 40 bytes {1} [built]
    + 305 hidden modules
Child html-webpack-plugin for "index.html":
       [0] ./~/lodash/lodash.js 540 kB {0} [built]
       [1] ./~/html-webpack-plugin/lib/loader.js!./app/index.html 740 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]

JavaScript として bundle される

これまでの一連の流れの中で抑えておくべきポイントは、 *-loader を利用して取り込んだ assets が JavaScript として出力される ということです。
例えば下記のように装飾した CSS は、最終的に import(require) したファイルから app.js に含まれて出力されています。

app/stylesheets/style.css
.your-class {
  background: skyblue;
}
app/index.js
import styles from './stylesheets/style.css';

css-loader -> style-loader によって出力された JavaScript が、動的に <head><style> として差し込みます。