webpack入門_asset management
前回に引き続き今回はassetファイルを扱いたいと思います。
cssファイルの読み込み
以下のコマンドでcssファイルを読み込めるようにします。
npm install --save-dev style-loader css-loader
以前は--save-devではなく--saveを利用しましたが、--save-devは開発時に必要になるテスト用ライブラリやlinter,ファイルのローダーなどで--saveはビルド後の生成物に含める必要があるライブラリを指定します。
それからwebpack.config.jsのrulesを修正し、以下のようにします。
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } };
これでwebpack側がcssファイルを扱える準備が済んだのでcssファイルの作成と読み込みを行います。 asset/style.css
.hello { color: red; }
src/index.js
import _ from 'lodash'; import '../asset/style.css'; function component() { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); return element; } document.body.appendChild(component());
あとは以前と同じようにビルドしてindex.htmlをブラウザで表示したらhello webpackが赤文字で表示されるはずです。
npm run build
open index.html
画像の読み込み
以下のコマンドで画像をfile-loaderを依存関係に追加します。
npm install --save-dev file-loader
webpack.config.jsを修正して画像用のruleを追加します。
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] } ] } };
index.htmlはdist/index.htmlに配置します。 dist/index.html
<!doctype html> <html> <head> <title>Getting Started</title> </head> <body> <script src="main.js"></script> </body> </html>
あとはsrc/index.jsで画像を読み込んでみます。
import _ from 'lodash'; import '../asset/style.css'; import Icon from '../asset/icon.png'; function component() { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); var myIcon = new Image(); myIcon.src = Icon; element.appendChild(myIcon); return element; } document.body.appendChild(component());
cssでbackgroundに画像を指定する場合は以下のようになります。
.hello { color: red; background: url('../asset/icon.png'); }
あとはビルドしてdist/index.htmlをブラウザで開けば結果が確認できます。
npm run build
open dist/index.html
ビルド後の画像はdistディレクトリに出力され、ファイル名が長い文字の羅列に変わっています。
データファイルの読み込み
nodejsではcsv,tsv,xml読み込み用のローダーが作られていますので試してみたいと思います。
ライブラリインストール
それから以下のxmlファイルを作成します。 asset/data.xml
<?xml version="1.0" encoding="UTF-8"?> <note> <to>Mary</to> <from>John</from> <heading>Reminder</heading> <body>Call Cindy on Tuesday</body> </note>
src/index.js内でxmlを読み込んでconsoleに出力してみます。
import _ from 'lodash'; import '../asset/style.css'; import Icon from '../asset/icon.png'; import Data from '../asset/data.xml'; function component() { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); var myIcon = new Image(); myIcon.src = Icon; element.appendChild(myIcon); console.log(Data); return element; } document.body.appendChild(component());
あとはこれまで同様ビルドしてdist/index.htmlをブラウザで開いた後開発者モードでコンソールをみたら結果が確認できます。
npm run build
open dist/index.html