webpack4の導入方法（3）画像のバンドル

そもそもwebpackはモジュール化するものであり、それはJavaScriptで活用するものです。
けれども、ローダーという仕組みを使用するとJavaScript以外のCSSや画像などでもバンドルすることができるようになります。

画像をバンドルするには「url-loader」をインストールする必要があります。
これは画像をjavascript化することです。専門的にいうとDataUrl化することでJavaScript化するわけです。

画像をバンドル化することでリクエスト回数を劇的に減らすことが可能になります。けれどもあまり大きなサイズの画像はかえってデータが巨大化して逆効果になります。
画像のバンドル化が有効なのは、ファイルサイズの小さい複数のアイコンなどに有効です。
画像のスプライト化と同じような発想といえるでしょう。

＊詳細なコードはGitHubにあります。

url-loaderを導入するコマンド

npm install --save-dev url-loader

webpack.config.jsに追記します。

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
	entry:'./src/index.js',
	output:{
		path:`${__dirname}/dist`,
		filename:'main.js'
	},
	devServer:{
		contentBase:'./dist'
	},
	module:{
		rules:[
			{
				test: /\.css$/,
				use:ExtractTextPlugin.extract({
					use:'css-loader'
				})
			},
			{
		        test: /\.(gif|png|jpg)$/,
		        use: [
		          {
		            loader: 'url-loader',
		            options: {
		              limit: 51200,
		              name: './images/[name].[ext]'
		            }
		          }
		        ]
		    }
		]
	},
	plugins:[
		new ExtractTextPlugin('style.css'),
		]
}

index.jsの例

import {NAME} from './myval.js';
import './style.css'
import pic from './images/logo.gif';
console.log(NAME);
window.addEventListener('DOMContentLoaded',
	function(){
		let img = new Image();
		img.src = pic;
		document.body.appendChild(img);
	},false);

これで画像が表示されます。