Webpack vol.3 (Server, Fontawesome & HTML)

/

Webpack dev server

扱っている内容が大したこと無かったのもあって前回まではローカルにあるファイルをブラウザで開いて動作確認をしていましたが、一々ファイルを開くのも面倒ですしWebpackには簡易な開発用のサーバーが用意されているので試してみました。

WEBPACK-DEV-SERVER – webpack.github.io

インストール

$ npm install webpack-dev-server --save-dev

webpack.config.js

webapck.config.jsでエントリポイントとoutput:を設定しておく。

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js',
  },
...
}

サーバーの起動

サーバーはwebpack.config.jsのあるディレクトリで以下のコマンドを実行すると起動出来ます。

$ node_modules/.bin/webpack-dev-server

サーバーのデフォルトの接続先はlocalhost:8080です。

npm-scripts

npmでダウンロードしたモジュールはnpm-scriptsを使って起動出来るので、package.jsonであらかじめスクリプトを登録しておくとよりスマートに起動出来ます。

{
...
  "scripts": {
    "start": "webpack-dev-server"
  },
...
}
# scriptからサーバーを起動
$ npm start

サーバーの終了

Ctrl-C

Font Awesome

なにかと使う機会が多いのでwebpackでのFontAwesomeの追加も試してみました。

インストール

$ npm install font-awesome --save

webpack.config.js

webapckのビルド時のメッセージなどを見れば確認出来ますが、Fontawesomeは必要な各ファイルを「拡張子 + V=x.x.x」という様にバージョンの情報付きで読み込んでいます。

./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 221 kB {0} [built]

なのでfontsディレクトリにある必要なファイルをurl-loaderで以下のように読みこんでやります。

{
  test: /\.(woff(2)?|.ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url',
},

なおurl-loaderでlimitを設定する場合ですが、.ttfだけはlimitを設定した場合に上手く動いてくれなかったので他と分けて設定する必要がありました。

{
  test: /\.(woff(2)?|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url?limit=9999',
},
{
  test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url',
},

loaderの設定が出来たらエントリポイントから読みこんでいるJSファイルでFontawesomeのCSSファイルを読みこんでアイコンを使用します。

require('font-awesome/css/font-awesome.min.css');

var container = document.getElementById('container');
container.innerHTML = '<i class="fa fa-check-circle-o fa-5x"></i>';
Fontawesome

html-loader

html-loaderを使うと個別に用意したHTMLをCSSやJavaScriptのようにWebpackで取り込む事が出来ます。

html-loader – Github

インストール

$ npm install html-loader --save-dev

webpack.config.js

loaderの設定を行います。

module: {
  loaders: [
    {
      test: /\.html$/,
      loader: 'html-loader'
    },
  ]
}

File

ファイルを用意してhtml-loaderを実行してみます。

読み込みたいHTMLファイルを用意し

<div>
  <p>これはWebpackにおける</p>
  <p>html-loaderの</p>
  <p>テストです。</p>
</div>

JavaScriptの場合と同様にrequireで取り込んで描写先のHTML挿入します。

var container = document.getElementById('container');
var content = require('../html/content.html');
container.innerHTML = content;
<!DOCTYPE html>
<div>
  <h1>Webpack Test</h1>
</div>
<div id="container"></div>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
html-loader

html-webpack-plugin

html-webpack-pluginを利用するとビルドしたJSファイルを読み込むためのHTMLをwebpack側で作成する事が出来ます。

$ npm install html-webpack-plugin

html-webapck-plugin

webpack.config.js

html-webpack-pluginを読み込みPluginsで作成するHTMLの設定をします。

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    javascript: './entry.js',
  },
  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: 'bundle.js',
  },
  plugins: [
    //デフォルトだとindex.htmlが作成される。
    new HtmlWebpackPlugin(),
  ],
}

ビルドを実行するとoutputに指定したパスにHTMLファイルが作成されます。

$ webpack
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

作成するHTMLファイルの内容はHtmlWebpackPlugin()内で設定が出来ます。

plugins: [
  new HtmlWebpackPlugin(
    title: "Html Plugin Test",
    filename: "index.html",
    inject: "head",
  ),
],

また複数のファイルを同時に作成する事も可能です。

plugins: [
  new HtmlWebpackPlugin({
    title: "Html Plugin Test",
    filename: "index.html",
  }),
  new HtmlWebpackPlugin({
    title: "Another HTML",
    filename: "another.html",
  }),
],