フロントエンド弱者が腹を括ってWebpackに触ってみた

個人的な経験としても、htmlファイルの中に<script>タグでJSファイルを埋め込んでいくときに、記述の順番を間違えて動作しない（先に読み込んだJSから後に読み込むJSを利用していた）という経験をしており、これが増えてくるとヤバそうだと感じていました。かといって、ひとつのファイルに全部書き込むのは嫌なので、モジュールシステム、モジュールバンドラーの出番というわけですね。

モジュールバンドラーのなかでも、Webpackは広く採用されているものです。『速習Webpack』では、Webpackの長所として下記のものを挙げています。

さまざまなモジュール形式に対応している
ローダー／プラグインが豊富である
様々なフレームワークで採用されている

3つ目の理由に関連したものかもしれませんが、採用実績が豊富であるため、試したいライブラリのサンプルが見つけやすいのもメリットではないかと感じています。

Webpackをインストールする

それでは、Webpackをインストールしていきます。npmを利用します。

ターミナル

> cd プロジェクトのパス
> npm
> npm init -y # -y は規定の値で設定ファイルを作成
# package.jsonが生成される
> npm install --save-dev webpack webpack-cli
# --save-dev はpackage.jsonにインストールするパッケージの情報を記録するオプション
# webpack-cli はwebpackコマンドを実行するために必要

package,jsonはNode.jsの設定ファイルで、依存関係などを記載しておくと別の環境で必要なライブラリを用意したいときに便利（npm installだけで構築できる）らしいです。

qiita.com

Webpackがインストールできたら、下記のような構成を作ります。

.
├── node_modules   ←npmでインストールしたライブラリが置かれる
│
├── dist ← バンドルしたファイルが出力される
│   └── index.html ←生成したJSファイルを呼び出すhtml
│
├── src ← Webpackによってバンドルされる対象のファイル
│   └── index.js ←エントリーポイント
│
├── package.json
│
└── webpack.config.js

このような構成を作って、npx webpackを実行すると、dist配下にmain.jsが生成されます。これがバンドルしたファイルです。npx [パッケージ名]で、ローカルのnode_modules内のパッケージを実行するコマンドです。

qiita.com

ちなみに、エントリーポイントと出力場所はデフォルトでそれぞれ、/src/index.js、/dist/main.jsになっているようですが、下記のような設定ファイルを作成することで変更することが可能のようです。このwebpack.config.jsは、ローダー等を追加する際にも必要になってきます。

webpack.config.js

module.exports = {
    mode: 'development', // productionを指定すると実行効率の良いコードを生成する
    entry: './src/index.js',
    output: {
        path: `${__dirname}/dist`,
        filename: 'main.js'
    },
/* 後略 */

開発サーバーの導入

静的Webサイトを作るだけであれば、上記のnpx webpackコマンドを実行してから/dist/index.htmlを開けばよいのですが、いちいちビルドするのはだるいので、開発サーバーを導入します。ホットリロードってやつですね。

ターミナル

npm install --save-dev webpack-dev-server
# 開発サーバーがインストールされる

webpack.config.js

module.exports = {
  /* 中略 */
  devServer: {
    contentBase: './dist'
  },
};

[プロジェクトルート]/dist配下のファイルがコンテンツとして公開されるということですね。

次に、開発サーバーを起動するためのコマンドにショートカットを設定しておきます。package.jsonを編集します。ここではビルド用のショートカットも設定しています。

package.json

"scripts": {
    "start": "webpack-dev-server  --open",
    "build": "webpack --config webpack.config.js"
},

こうしておくと、npm startコマンドで開発サーバが起動します。package.jsonのscriptsに記載した内容はnpm run hogehogeで呼び出せるようになりますが、startは特殊らしく、単にnpm startで起動できるようになります。

ローダー

モジュールバンドラーとしてのWebpackのコアな機能は、JavaScriptのモジュールをバンドルすることなのですが、ローダーを用いるとCSSや画像ファイルをモジュール化して、Webpackのバンドルの対象とすることができます。

山田さん曰く、

webpackを学ぶということは、ローダーを学ぶことである

とのことです。書籍では様々なファイルに対応したローダー（スタイルシート、画像、Webフォント、CSV、JSON、HTMLなど）を紹介していますが、スタイルシートに関わるものだけご紹介します。

スタイルシートのバンドル

css-loaderによってスタイルシートを読み込み、style-loaderによって<style>要素として埋め込みます。いずれも、npm installでインストールします。インストールしたローダーは、webpack.config.jsに記載します。

webpack.config.js

module.exports = {
/* 中略 */
    module: {
        rules: [
            // スタイルシートを処理するローダー
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
};