webpackを用いたフロントエンド開発環境の構築その2

〜エントリーポイントを作成し、モジュールをバンドルする〜

↓YOUTUBEでも解説しています↓

package.jsonの作成

下記コマンド実行後、ルートディレクトリにpackage.jsonが作成される

npm init -y

webpackとwebpack CLIのインストール

下記コマンド実行後、インストールが完了すると、

ルートディレクトリにpackage-lock.jsonのファイルとnode_modulesディレクトリが作成される
package.jsonのdevDependenciesにwebpackとwebpack-cliの文言が追記される

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

devDependenciesとdependenciesについて

devDependencies

開発時に必要な必要なモジュール

(開発に必要なパッケージのみを書きます)

dependencies

実行ファイルに必要なモジュール

外部モジュールをインストールする(jQuery)

　下記コマンド実行により、インストールが完了するとpackage.jsonのdependenciesにjQueryが追記される

npm install --save jquery@3.5.1

webpackのバンドル処理をnpm scriptsで実行できるように設定

webpackをnpm scriptsで実行(npm run buildで実行)できるように設定する(5〜7行目を修正)

// package.json

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

webpack.config.jsを作成する

エントリーポイントとしてapp.jsにサンプルモジュール(calc.js)をインポートし、1つのファイル(bundle.js)にバンドルしてpublicディレクトリに出力する設定を記載している

// 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',
  },
};

path

nodejsに組み込まれているモジュールなのでインストール等は不要。

path.resolve()は、()内を絶対パスに変換するメソッド

__dirnameは常に現在実行中のスクリプトが存在するディレクトリ

entry

エントリポイントを指定する

output

バンドルファイルの出力先設定(絶対パスでの記述が必要)

サンプルモジュールを作成する(calc.js)

// src/js/modules/calc.js

export const add = (num1, num2) => {
  return num1 + num2;
};

エントリーポイントとなるjsファイルを作成する(app.js)

// src/js/app.js
import $ from "jquery";
import { add } from "./modules/calc";

console.log("app");
// calc.jsから読み込んだaddを実行して結果をresultとしてhtmlのbodyの子要素にappendする
const result = add(10, 2);
$("body").append(result);

ビルドする

npm run build

バンドルされたファイルが生成される(public/js/bundle.js)

bundle.jsをhtmlに読み込み、ブラウザで確認する

生成されたjsファイルが正常な動作を行うものか検証するために、htmlファイルを作成して、読み込ませる

//  public/index.html

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>test</h1>
    <script src="js/bundle.js"></script>
  </body>
</html>