【webpack v4】フロントエンド環境構築

2022/05/262022/05/29

今回は実務でも対応できるようwebpack v4について学習しましたので、用語解説から実際にwebpackの環境構築を行っていきます。

webpackとはフロントエンド開発用のモジュールバンドラで、簡単にご説明すると複数のファイルをまとめることができます。バンドルできる以外にもローダーやプラグインなどの使用もでき様々なユースケースに対応できます。

webpackのメリット

webpackのメリットは様々ですが下記のようなものがあります。

ファイルを分割できる
外部モジュールを簡単に使用できる
依存関係を解決したファイルを出力できる
最適化したファイルを出力できる

このように可読性や作業分担・エラーチェックのしやすさなどが主なメリットになります。

webpack関連の用語解説

見慣れない用語がありますのでわかりやすくご説明します。

モジュールバンドラ

複数のモジュールを依存関係を解決して一つにまとめるものになります。

モジュール

js.img.css 等のwebpackでまとめるファイルになります。

ローダーとプラグイン

webpackはファイルをまとめるだけでなく『ローダー』や『プラグイン』を使用でき、

ユースケースに応じたフロントエンドの開発環境を構築できる

エントリーポイント

webpackがファイルをまとめる際に最初に見に行くファイル。webpackはエントリーポイントから解析を始めファイルを出力する。

バンドル

ファイルをまとめる

ビルド

ソースコードにバグがないか解析を行い実行できる形のファイルに変換し、組み立てること

ローダー

javascript以外のファイルをバンドルできるよう変換するもの

(javascriptを変換するローダーやすべてのローダがファイルを変換するローダーではない)

プラグイン

webpackを拡張させるためのプログラムのこと。

webpack v4を使用

NodeJS: v16.4.0
npm: 8.3.0

このような環境で動作確認済みです。

初期化処理

まずは作業用ディレクトリを作成し、npmを初期化します。

%npm init -y

package.json(インストールしたパッケージを管理するためのファイル)が作成され、プロジェクトの情報が記載されています。

不要なコードを削除

今回はシンプルに構築しますので、不要なものを削除しこのような形にします。

{
  "name": "test",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

webpackをnpmインストール

次にwebpackをインストールします。

%npm install --save-dev webpack@4.43.0 webpack-cli@3.3.11

node_modulesとpackage-lock.json が作成されpackage.jsonが書き換わります。

構成としては現在このような形になります。

.
├── node_modules
├── package-lock.json
└── package.json

package.jsonが下記のようにdevDepenciesにwebpackとwebpack-cliが追加されていれば問題なくインストールできています。

  {
    "name": "test",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
      "webpack": "^4.43.0",
      "webpack-cli": "^3.3.11"
     }
  }

jqueryをnpmインストール

jqueryをインストールします。

%npm install --save jquery@3.5.1

package.jsonにjqueryが追加されます。

  {
    "name": "test",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
      "webpack": "^4.43.0",
      "webpack-cli": "^3.3.11"
     },
    "dependencies": {
      "jquery": "^3.5.1",
    }
  }

npm scriptを作成

npm scritpはコマンドをショートカットできます。

下記のように記載し、npm run buildでwebpackが実行されます。

  {
    "name": "test",
    "scripts": {
      "build" : "webpack"
    },
    "devDependencies": {
      "webpack": "^4.43.0",
      "webpack-cli": "^3.3.11"
     },
    "dependencies": {
      "jquery": "^3.5.1",
    }
  }

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',  //出力されるファイル名
  },

モジュールを作成

src/js/modules/math.js を作成し下記を記述

  export const add = (number1,number2) =>{
    return number1 + number2;
  };

エントリーポイントを作成しモジュールを読み込む

src/js/app.jsを作成し下記を記述


import $ from 'jquery'; /nodeモジュールですが相対パス不要
import {add} from './modules/math'; //拡張子不要

console.log('app');

const result = add(1,2); //読み込んだadd関数を使用
$('body').append(result);

webpackを実行

%npm run build

実行するとエントリーポイントがビルドされpublic/js/bundle.jsが作成されます。

ビルドされたjsファイルを確認

publicにindex.htmlを作成しbundle.jsを読み込み確認します。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <title>Document</title>
    </head>
    <body>
      <h1>INDEX</h1>
      <script src="js/bundle.js"></script>
    </body>
    </html>

モジュールで作成した関数を実行された結果がjqueryで反映されていれば完成です。

シンプルなwebpackでの環境構築でした。

< 一覧へ戻る >

NOANAVI

BLOG