0%

Programmingプログラミングナレッジ

Posted:2020.04.14

webpack-dev-serverでローカルサーバーと自動更新させてwebpackのファイル変更を検知する

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を使った開発についてまとめてみました。効率的な開発のためにはローカルサーバーを起動してのファイルの更新検知とブラウザ自動リロードは開発にほぼ必須の要件になるのではないでしょうか。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】