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',
  },
};
pathnodejsに組み込まれているモジュールなのでインストール等は不要。

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>
  • 問題なく表示されていればOK(calc.jsからimportした計算関数が実行され、計算結果がbody要素にappendされているので、ブラウザに表示できている)

その3はこちら

webpackを用いたフロントエンド開発環境の構築 その3
〜webpackの設定ファイルを分割する(共通・開発・本番)〜↓YOUTUBEでも解説しています↓webpack-mergeが必要なので、インストールnpm install --save-dev webpack-mer...

コメント

タイトルとURLをコピーしました