Webpack入門：実務で理解するための第一歩

はじめに

業務でRailsのwebpackerを利用しています。
ただ、webpackerの使い方もそうですが、その前にwebpackを学んだ方が理解できると思いました。

なので、今回はwebpackとは？を中心に、学んだことをアウトプットしようと思います。

webpackとは？

webpackとは、JavaScriptやCSSなどを一つまたは複数のバンドルにまとめるためのツールです。依存関係のあるモジュールを検出し、ブラウザで利用可能な形式に変換してパフォーマンスを向上させます。

イメージとしては、以下になります。

インストール方法

npm init -y

まず、上記のコマンドでpackage.jsonを作成します。
その後、以下のコマンドで、webpackをインストールします。

npm install --save-dev webpack@5.0.0 webpack-cli@5.0.0

@以降に指定しているバージョンは、開発環境に合わせて変更してください。

他のライブラリをインストールする場合は、以下ようなコマンドを入力してください。

npm install --save bootstrap@5.0.0

--saveと--save-devの違い

--saveは、package.jsonのdependenciesに追加され、--save-devはdevDependenciesに追加される。

package.json

{
  "name": "webpack-lesson",
  ...
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^5.0.0"
  },
  "dependencies": {
    "bootstrap": "^5.0.0"
  }
}

開発環境で使用するライブラリなのか、アプリケーションの動作に必要なのかの違いです。

npm scripts とは

コマンドをショートカットで入力できる仕組みです。

package.json

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

上記のように、scripts内に記載することで、以下のようにコマンドを実行できます。

npm run build

今回はあくまで例なので、環境に沿った設定をしてみてください。

設定

webpack.config.json とは

webpackにおける設定ファイルになります。
参考として、以下のような記載になります。

webpack.config.js

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/js/app.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'js/bundle.js',
  },
}

語句	説明
mode	ビルドモードの指定（development, production または none）
entry	ビルドの起点となるファイルのパス
output	出力されるファイルの設定

watchもあり、trueに設定しておくと、最初のビルド後、ファイルの変更を監視してビルドをしてくれます。
開発環境であれば、設定しておくのが良いかなと思いました。

エントリーポイントを複数設定するには？

以下のように、entryを複数記載して、outputで[name]とする。

webpack.config,js

module.exports = {
  entry: {
    app: './src/js/app.js',
    another: './src/js/another.js'
  },
  output: {
    path: path.resolve(__dirname, 'pack'),
    filename: 'js/[name].bundle.js',
  },

[name]とすることで、app・anotherそれぞれで出力されるようになります。

実行

実際に用意したjsをバンドルするには、以下のコマンドになります。

npm run build

上記のコマンドは、今回の記事で用意したscriptコマンドになります。
ご自身の環境に合わせて、バンドルを行なってください。

webpack.config.jsでは、pack/jsを指定していたので、そこにバンドルされたファイルが作成されます。
filenameで指定していると、その命名で作成されます。（今回だと、bundle.jsになります。）

まとめ

今回でwebpackがどういうものか、触りはわかったので、あとは業務でどのように落とし込めるか考えてみようと思いました。

今回学んだ以外にも、他にも学ぶことはあるかなと思います。

• 開発環境と本番環境を分けるベストプラクティス
• 画像とcssのバンドル
• 最適化 ...etc

また実務で学んだ際は、アウトプットしようと思います。
最後までご覧いただき、ありがとうございました。

参考文献