今回はwebpack導入から共通HTMLのテンプレート化を実装していきたいと思います。
目次
webpackとは
webpackとは、複数のモジュールを1つにまとめて出力することができる、モジュールバンドラのことです。
webpackを導入することによって
- jsファイル間での依存関係の解消
- コード記述量の減少
- サーバーへのリクエスト数の減少
などのメリットがあります。
ディレクトリの構成
今回はこちらのディレクトリ構成で進めて行きます。
dist/以下は、ビルドした後に生成されるファイルです。
webpack-sample/
┗dist/
┗bundle.js
┗html/
┗index.html
┗sample.html
┗src/
┗js/
┗index.js
┗html/
┗index.html
┗sample.html
┗common/
┗header.html
┗package.json
┗webpack.config.js
webpack導入方法
1. 任意の場所でディレクトリを作成
$ mkdir webpack-sample
$ cd webpack-sample
2. package.jsonの作成
$ npm init -y
もしくは
$ yarn init -y
-yオプションを付け加えることで、デフォルト値のままpackage.jsonをインストールすることができます。
3. webpackのインストール
$ npm install webpack webpack-cli --save-dev
もしくは
$ yarn add webpack webpack-cli --dev
webpackコマンドでwebpackを実行するためのwebpack-cliも一緒にインストールします。
--dev、--save-devオプションをつけることにより、package.jsonのdevDependencies内に追加されます。
また、npmコマンドで--save、yarnコマンドでオプション未指定の場合には、package.jsonのdependencies内に追加されます。
開発環境に必要なパッケージをインストールする際は、devDependencies内にインストールするようにします。
4. webpack.config.jsの設定
webpack-sampleディレクトリ直下に、webpack.config.jsを作成します。
webpack.config.js
const path = require('path'); //pathモジュールの読み込み
module.exports = {
entry: './src/js/index.js', // エントリーポイントになるjsファイルの指定
output: {
path: path.resolve(__dirname, 'dist'), // 出力先になるパスの指定
filename: 'bundle.js', // 出力先になるjsファイルの指定
},
HTMLファイルのテンプレート化
1. 共通化したいHTMLファイルをsrc/html/common/配下に作成
今回は、header.htmlファイルを作成しています。
こちらのファイルをテンプレート化して、他のHTMLファイルから読み込めるように設定します。
header.html
<header>
<div>
<a href="./">HOME</a>
</div>
<div>
<a href="./sample.html">sample</a>
</div>
</header>
2. 必要なパッケージをインストール
$ npm install html-loader html-webpack-plugin --save-dev
もしくは
$ yarn add html-loader html-webpack-plugin --dev
3. webpack.config.jsにてテンプレートhtmlファイルを読み込む設定
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src' , 'html', 'index.html'), // パスの指定
filename: 'html/index.html' // dist/html/以下にindex.htmlをビルド
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src' , 'html', 'sample.html'),
filename: 'html/sample.html'
}),
],
}
4. header.htmlを読み込む
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HOME</title>
</head>
<body>
<%= require('html-loader!./common/header.html') %> //header.htmlの読み込み
<div>HOME</div>
</body>
</html>
同様にsample.htmlでも記述します。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
<%= require('html-loader!./common/header.html') %>
<div>sample</div>
</body>
</html>
これで、準備は完了したのでビルドしてみましょう。
ビルド
package.json の “scripts” を以下のように編集
package.json
"scripts": {
"build": "webpack --mode development"
}
$ npm run build
もしくは
$ yarn run build
dist/html以下にheader.htmlが読み込まれた、index.html、sample.htmlが作成されているかと思います。
webpack-dev-serverをインストールして、ローカルサーバーで確認
1. webpack-dev-serverをインストール
$ npm install webpack-dev-server --save-dev
もしくは
$ yarn add webpack-dev-server --dev
2. webpack.config.jsでローカルサーバーを立ち上げる設定
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src' , 'html', 'index.html'),
filename: 'html/index.html'
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src' , 'html', 'sample.html'),
filename: 'html/sample.html'
}),
],
devServer: {
contentBase: path.resolve(__dirname, 'dist', 'html') //dist/html/以下のindex.htmlを参照
}
}
3. package.jsonの書き換え
package.json の “scripts” を以下のように編集
package.json
"scripts": {
"build": "webpack --mode development",
"start": "webpack-dev-server --mode development --host 0.0.0.0 --open"
}
＄ npm run start
もしくは
$ yarn run start
ローカルサーバーでindex.htmlが立ち上がったことが確認できたと思います。
まとめ
今回はwebpackを使って初めて、HTMLのテンプレート化を行いました。
共通HTMLが多ければ多いほど、導入することでコードの記述量を削減することができると思います。
少しでも参考になると幸いです。