JavaScriptでのウェブアプリケーション開発では、様々なフロントエンドの技術が用いられており、webpackもそのうちの一つです。過去記事「webpackを使ってjavascriptファイルをバンドルさせる」などでもwebpackの特徴についてまとめていますが、webpackを使うと、jsファイルを1つにまとめてバンドルさせることができます。   さらに、それ以外でもローカルサーバーを使ったファイル変更の検知や、差分ビルドなども可能です。今回はそんなwebpackの機能について色々とまとめていきたいと思います。  

webpack開発環境の作成

まずは過去記事でも紹介していますが、プロジェクト内にwebpackの環境を用意していきます。Node.jsが必要になりますのであらかじめ用意しておきます。下記のコマンドで今回使うモジュールをインストールしていきます。

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

  今回使うモジュールは「webpack」本体と、コマンドラインでwebpackを操作するために必要な「webpack-cli」そしてローカルサーバーを構築できる「webpack-dev-server」の3つを使います。 【package.json】

{
 .......
 "scripts": {
  "dev": "npx webpack-dev-server",
  "build": "npx webpack"
  "watch": "npx webpack --watch"
 },
 "devDependencies": {
  "webpack": "^4.42.1",
  "webpack-cli": "^3.3.11",
  "webpack-dev-server": "^3.10.3"
  .......
 }
}

  インストールが終わると「package.json」のdevDependenciesに追加されているのが確認できます。そして今回はwebpackでの操作をnpm runのコマンドで実行できるように、scriptsをそれぞれ設定しておきます。上から、ローカルサーバーの起動、バンドルファイルのビルド、変更を検知して差分ビルドを行う3つの操作になります。   また、今回は下記のようなファイル構成を想定しています。ざっと見ていきますと、ソースファイル用のディレクトリと出力ファイル用のディレクトに分かれており、ソースファイルのディレクトリのなかでモジュール用にフォルダを分けられるようにしています。その中ではモジュール化されたjsファイルが含まれています。

node_modules
dist
  ┗（main.js）
src
  ┣ index.js
  ┗ modules
    ┗ module.js
webpack.config.js

  そしてwebpackでは重要な設定ファイルの「webpack.config.js」も用意しておきます。次にこの設定ファイルの中身を見ていきます。  

importとexportでのモジュール読み込みとファイルのバンドル

webpack.config.jsでは主にビルドに関する設定とローカルサーバーに関する設定を行なっています。 【webpack.config.js】

module.exports = {
 mode: 'development',
 entry: './src/index.js',
 output: {
  path: `${__dirname}/dist`,
  filename: 'main.js'
 },
 devServer: {
  contentBase: `${__dirname}/dist`,
  port: 8080,
  open: true
 }
}

  entryの項目ではバンドルファイルのベースとなるエントリーポイントに当たるファイルを指定し、outputではバンドルされたファイルの出力先とファイル名を指定できます。   そして今回はさらにdevServerの項目において、ローカルサーバーの設定を行います。そして、これら設定が完了したら、モジュール化されるファイルのインポートなどを見ていきます。まずはエントリポイントとなるファイルからです。 【src/index.js】

import moduleFunction from './modules/module.js';

moduleFunction();

  ここでは対象となる読み込まれるモジュール化されたjsファイルを指定します。そして、そのモジュールを関数として実行されるようにしています。そして、モジュールとなるファイル側では、まずは「export default」でモジュールであることを明示して、処理を記述していきます。そこから続けて関数を定義し、処理を行っていきます。 【src/modules/module.js】

export default function moduleFunction(){
 console.log('Hello World!!');
}

  これで、jsファイルをモジュール化することができ、インポートする側のファイル内でインポートした後、関数を実行することができるようになります。そして下記のコマンドでファイルをバンドルさせてビルドしていきます。コマンドはpackage.jsonのScriptsで指定しているもの、もしくは元々のwebpackコマンドのどちらでも実行できます。

$ npm run build

もしくは

$ npx webpack

  コマンドを実行すると、webpack.config.jsで指定した出力先にバンドルされたファイルが生成されます。中身を見るとモジュールが読み込まれているのが確認できます。 【dist/main.js】

/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};

..................

/***/ "./src/index.js":
/*!**********************!*
!*** ./src/index.js ***!
**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

..................

/***/ "./src/modules/module.js":
/*!*******************************!*
!*** ./src/modules/module.js ***!
*******************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

..................

   

ローカルサーバーを立ち上げて開発する

続いてwebpack-dev-serverでローカルサーバーの起動とファイルの更新を検知していきます。webpack-dev-serverを使うことで、ソースコードに更新があった場合、自動的にブラウザをリロードしてくれるようになります。下記コマンドでローカルサーバーが起動し、ファイルの監視モードに入ります。

$ npm run dev

もしくは

$ npx webpack-dev-server

  コマンドを実行すると、http://localhost:8080/にアクセスすると指定したディレクトリを参照できるようになります。今回は簡単はHTMLを用意して、バンドルされたスクリプトを読み込んでコンソールで確認できるようにしてみます。 【HTML】

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
 </head>
 <body>
  <script src="main.js"></script>
 </body>
</html>

  これで、先ほどのモジュール化されたコードが読み込まれているかを確認してみますと、きちんとコンソールでログが出力されているのがわかります。 【console】

Hello World!!

  また、webpackには「watchオプション」というものも用意されており、こちらもファイルの更新を検知できますが、ローカルサーバーが起動しないため、単純に差分ビルドのみで問題ない場合はwatchオプションを実行するだけで大丈夫です。

$ npm run watch

もしくは

$ npx webpack --watch

 

---

  今回はwebpackのプロジェクトでwebpack-dev-serverを使った開発についてまとめてみました。効率的な開発のためにはローカルサーバーを起動してのファイルの更新検知とブラウザ自動リロードは開発にほぼ必須の要件になるのではないでしょうか。