[webpack] webpack 2 入門: CSS や image を bundle する
CSS や image ファイルも webpack で JavaScript に bundle します。
[markdown]
こちらを参考にさせて頂きました。
> * [webpackでJavaScriptライブラリを利用する – to-R](http://blog.webcreativepark.net/2016/11/25-134312.html)
## Installation
css や image を扱うための loader をインストールします。
> * [webpack-contrib/url-loader: url loader module for webpack](https://github.com/webpack-contrib/url-loader)
> * [webpack-contrib/style-loader: style loader module for webpack](https://github.com/webpack-contrib/style-loader)
> * [webpack-contrib/css-loader: css loader module for webpack](https://github.com/webpack-contrib/css-loader)
“`prettyprinted
% yarn add –dev css-loader style-loader url-loader
“`
ここではサンプルとして slick というカルーセル機能を提供するライブラリをインストールします。
> * [slick – the last carousel you’ll ever need](http://kenwheeler.github.io/slick/)
“`prettyprinted
% yarn add slick-carousel jquery
“`
## webpack.config.js
css と image の設定を追加します。
“`javascript: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](https://www.d-wood.com/blog/2017/06/05_9005.html) のテンプレート機能を利用して、HTML を生成しています。
## Usage
slick 用の `
JavaScript の読込を追加すれば、生の HTML ファイルでも構いません。
“`html：app/index.html
“`
JavaScript ファイルに slick の JavaScript と CSS を読み込みます。
“`jvascript: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 されます。
“`prettyprinted
% $(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 に含まれて出力されています。
“`css:app/stylesheets/style.css
.your-class {
background: skyblue;
}
“`
“`javascript:app/index.js
import styles from ‘./stylesheets/style.css’;
“`
css-loader -> style-loader によって出力された JavaScript が、動的に `