〜エントリーポイントを作成し、モジュールをバンドルする〜
↓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>
- 問題なく表示されていればOK(calc.jsからimportした計算関数が実行され、計算結果がbody要素にappendされているので、ブラウザに表示できている)
その3はこちら

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