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