Help us understand the problem. What is going on with this article?

webpack入門2 ~Asset Management~

More than 1 year has passed since last update.

はじめに

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を進めます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした