webpackでプロジェクト作成（アセット管理）
Getting Started
Asset Management (←今回はコレ)
Output Management
Development
前回作成したプロジェクトに画像などのアセットを追加していく。
追加したアセットがどのようにページに表示されるかを順を追って理解する。
CSSファイルを読み込むまでの流れ
JSファイル内でCSSファイルを読み込む流れは、
- HTML出力用のタグをbundle.jsに変更する
- css用のlodashをインストールする
- webpack.config.jsでbundle.jsをアウトプットにし、loaderを読み込む
ここまでで下準備完了。
- style.cssを作成する
- index.js内でstyle.cssを読み込み、cssクラスとして出力する
エントリーポイントの変更
前回のプロジェクトで、index.jsをエントリーポイントにしてmain.jsをアウトプットを作成したが、これをbundle.jsに変更する。
webpack.config.jsのoutputに記述したファイルは自動生成される。
CSS用のloaderのインストール
ローダーをインストールすることで、.cssファイルをjsの中に読み込むことができる。
npm install --save-dev style-loader css-loader
・--save-dev: devDependenciesとしてインストール
・style-loader: JS内のCSSをHTMLとして出力する
・css-loader: JS内でCSSを使用できるようにする。便利なオプション設定もある。
webpack.config.jsを変更する
インストールしたloaderを使用するため、webpack.config.jsファイルに追記する。
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
],
},
};
loaderはチェーンとして繋がっていき、webpackがすべてを読み込んだあとで実行される。
そのためmoduleオプションの中に記述するloaderの順番が重要で、style-loader、css-loaderの順でないとエラーになる。
## CSSファイルの作成
src/style.cssを作成し、簡単なコードを追記する。
## src/index.jsにcssをインポートする
npm run buildでwebpackをリロードする。
dist/index.htmlを開くと、「Hello webpack」が赤色で表示される。
## 画像ロード用のloaderをインストールする
npm install --save-dev file-loader
## webpack.config.jsでfile-loaderをロードする。 moduleオプションのrulesの中に以下を追記する。
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
これを記述することで、画像ファイルが読み込まれ、distディレクトリに出力される。ハッシュ値で出力される。
## 画像ファイルの追加と読み込み srcディレクトリ内に画像を追加し、index.jsに出力のための追記する。
## cssに背景画像として追加
.hello {
color: red;
background: url('./icon.png');
}
npm run build
再読み込み。dist/index.htmlを開くと背景画像が表示される。
## フォントのローディング 先ほど画像を読み込んだfile-loaderは、画像以外のファイルも読み込むことが可能。
testで読み込むファイルを正規表現で指定する。
moduleのrulesに以下を追記。
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader',
],
},
## フォント用のフォルダを作成する
## cssファイルにフォントを追加する。
@font-face {
font-family: 'MyFont';
src: url('./my-font.woff2') format('woff2'),
url('./my-font.woff') format('woff');
font-weight: 600;
font-style: normal;
}
.hello {
color: red;
font-family: 'MyFont';
background: url('./icon.png');
}
## データのローディング JSON,CSV, XMLファイルのデータをローディングすることができる。
今回は、csvとxmlのローダーをインストールする。
いつものごとく、ローダーをインストールしたら、webpack.config.jsのmoduleオプションのrulesに、test, use, loader名を追記する。
npm install --save-dev csv-loader xml-loader
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader',
],
},
{
test: /\.xml$/,
use: [
'xml-loader',
],
},
## サンプル用の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.htmlにインポートする
## componentsディレクトリの作成 今更感はあるが、直感的なわかりやすさのために、ブラウザの表示に使われるデータをassetsからcomponentsフォルダに移動する。
外部データの取り込み方法は以上。 パッケージをインストールし、configファイルで読み込み、index.jsファイルに記述するのが基本的な流れとなる。