Webpackの導入

今回は前回に引き続きWebpackについてみていこうと思います。
今回は「Webpackの導入」についてです。

*この記事はこちらの記事を参考に自分なりにまとめ、自分が難しいと感じた単語を分かりやすく解説、書き直した記事になります。

Webpackの導入手順

まずは、Webpackの導入するための準備をしていきましょう。

1. Node.jsをインストールする

まず、Webpackを使う前に、公式サイトからNode.jsをインストールしてください。（推奨版がオススメです。）

2. コマンドラインを開く

3. ファイルを保存するフォルダーを作成コマンドラインで移動する

Webpackのファイル一式が保存されるフォルダーを好きな場所に作成し、cdコマンドで自分の作成したフォルダーまで移動します。
cd Desktop/webpack-tutorial

4. Webpackをインストールする

yarn init -y

上記のコマンドを実行するとpackage.jsonファイルが生成されます。

次に、以下のコマンドでWebpackをインストールしましょう。

yarn add -D webpack webpack-cli

これでWebpackを使用する準備が整いました。
↓こんな感じのファイルが出来上がっているかと思います。

次からはWebpackを使って実際にjsファイルをまとめてみましょう。

devDependenciesとDependenciesについて
devDependenciesとDependenciesの違いは「yarn installした時にインストールされるかされないか」です。
Dependenciesはインストールされ、devDependenciesはインストールされません。
分けることにより、インストールの負荷を減らすことができます。
devDependenciesには「ライブラリとして読み込む際はいらないもの」を入れるようにしましょう。
具体的には

• テストツール
• ビルドツール / バンドルツール(←Webpackはここに含まれます。)
• タスクランナー

などが挙げられます。

webpackでJSファイルをまとめる手順

##　モジュール方式のJavaScriptの書き方
一つのJavaScriptファイルに処理を書いていくとコードの行数が長くなり、可読性が悪くなってしまいます。
これを解決するためには機能ごとに複数のファイルへ分割する必要があります。
機能ごとに分割されたjsファイルを一般的に「モジュール」と呼びます。

実際にモジュール方式のjsファイルを作成してみましょう。

先ほど作成したフォルダの中にsrcフォルダーを作成し二つのjsファイルを作成します。

// import 文を使って sub.js ファイルを読み込む。
import { hello } from "./sub";

// sub.jsに定義されたJavaScriptを実行する。
hello();

// export文を使ってhello関数を定義する。
export function hello() {
  alert("helloメソッドが実行された。");
}

しかし、このままでは、古いブラウザ（例：Internet Explorer 11）では使用できないため、古いブラウザでも解釈できる形に変換する必要があります。
そこで登場するのがWebpackです。

コマンドラインで次のコマンドを入力してみましょう。

yarn webpack

上記のコマンドを実行するとindex.js内で必要なsub.jsが統合され、distフォルダーの中にmain.jsとして一つのファイルにまとめられて出力されているのが確認できると思います。

Webpackで出力したdistフォルダーの中にindex.htmlを作成し、main.jsを読み込むと、バンドルされたコードが実行されます。

簡単にWebpackのビルドができました！！
Webpackの基本的な使い方は以上になります。
ここからはWebpackを使う上で役に立つ便利な知識を書いていきます。

ビルドとは？
ビルドとは、ソースコードに問題がないか解析を行い、問題がなければ実行できるファイルの形にファイルを変換し、組み立てることをいいます。

Webpackをカスタマイズする

package.jsonをカスタマイズする

yarn webpackでビルドするのも簡単ですが、実際の開発現場ではyarn scriptsを使う方が多く、便利です。
yarn scriptsとは、コマンドのショートカットを貼るための機能です。
package.jsonファイルのscriptsにWebpackのビルドコマンドを追加してみましょう。

こうすることで
yarn build
というコマンドを打てば内部的にwebpackが呼び出され、yarn webpackと同じ結果を得ることができます。

scriptsに関する詳細はこちらに詳しい解説がありました。

webpack.config.jsをカスタマイズする

webpack.config.jsファイルを用意することで、Webpackの挙動を調整することができます。
よく使う設定として、エントリーポイントを設定するentryと、出力フォルダーをカスタマイズするoutputがあります。

module.exports = {
  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: `./src/index.js`,

  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名(省略可)
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: 'main.js',
  },
};

上記のように書くと、srcのindex.jsをdistのmain.jsに出力するということになります。
なお、pathは省略可能で、省略するとdistフォルダーに出力ファイルが生成されます。

webpackでコードの圧縮とソースマップを有効にする

Webpackでは、元のソースファイルとの関連性を示すソースマップを有効にすることもできます。

mode: 'development'

これをwebpack.config.jsに書くだけでソースマップを有効にすることができます。

modeをproductionにすると、ソースマップが無効化され、コードを圧縮することができます。

↓mode developmentの場合の出力ファイル

↓mode productionの場合の出力ファイル

二つの出力ファイルを見比べるとコード量が違うことがはっきりとわかります。

コードが少ない方がWebアプリが早く動き、パフォーマンスが向上します。
そのためWebアプリを公開するときはmodeをproductionにすることがオススメです。

webpackでローカルサーバーを起動し、変更時にブラウザをリロードする

ファイルを変更するためにビルドコマンドをコマンドラインで打ち込むのはめんどくさく、非効率的です。

Webpackでは、ファイルの変更を検知したり（watch）、自動的にビルドコマンドを実行し、ブラウザをリロードすると言った手順を自動化することができます。

自動でブラウザを起動し、ファイル変更をブラウザに反映させる方法

まずはwebpack-dev-serverモジュールをインストールします。

yarn add -D webpack-dev-server

コマンドを実行したら、package.jsonファイルのscriptsに

"scripts": {
    "build": "webpack",
    "start": "webpack serve"
  },

上記の記述を追加しましょう。

次に、ローカル開発用環境自動でを立ち上げるための設定をwebpack.config.jsファイルに記述します。

module.exports = {
  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: `./src/index.js`,

  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名(省略可)
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: 'main.js',
  },
  mode: 'production',

  devServer: {
    contentBase: 'dist',
    open: true,
  },
};

この設定をすることで、yarn startコマンドを実行すると自動的にブラウザが起動し、ファイルが実行されます。
また、ファイルを保存時にブラウザが自動的にリロードして、変更を反映してくれるので、コーディング作業が楽になります。

ファイル変更時に差分を自動ビルドする方法

webpack-dev-serverを使うと自動で変更をブラウザで反映してくれますが、distファイルがかわるわけではありません。

ファイル変更時に自動でビルドするには

{

    "build": "webpack --watch",
    "start": "webpack serve"
  },

webpackに--watchを追加してあげるだけです。
こうすることでファイルを変更するたびに自動でビルドを行ってくれるようになります。

いかがだったでしょうか？
これでWebpackの導入〜設定まで一通り追えたのではないかなと思います。

ReactやVueなどのjsのフレームワークを使っている人は、無意識のうちにWebpackを利用していますが、実際にWebpackについて調べてみるとその便利さが分かり、とても面白かったです。

次回は「Webpackを利用してReact + Typescriptの環境構築」に関して書いていこうと思います。

ここまで読んでいただきありがとうございました！！