webpackハンズオン - 長野エンジニアライフ

この記事は JSL (日本システム技研) Advent Calendar 2020 - Qiita 25日目の記事です。

webpackとは
ハンズオン準備
バンドルの実行

webpackとは

JavaScriptファイルをひとつにまとめるツール
- ローダーを使えば他のファイルもまとめることができる
それぞれのファイルを束ねる(バンドルする)役割から、モジュールバンドラーとも呼ばれる
複数のJavaScriptコードの依存関係を自動で解析して、バンドルしてくれる

メリット

自動的に依存関係を解決してくれる
リクエストの回数を抑える
- 複数のファイルをひとつにバンドルすることで、リクエストを減らせる -> 転送効率上昇

前述の利点から、多くのJavaScript フレームワークで採用されている。　ex ... Angular、React、Vue.js 　これらのフレームワークを学ぶ上で有用な前提知識を本記事で身につけましょう。👍

ハンズオン準備

作業フォルダの作成

作業ディレクトリはstudy-webpackとしてハンズオンを進めていく

- study-webpack
|- ...

※後述の操作について、特別な指定が無い場合はstudy-webpack直下で実行しています

プロジェクトの作成

以下のコマンドを実行し、設定ファイル(package.json)を作成

> npm init -y

webpack/webpack-cliをインストールする

> npm install --save-dev webpack@4.44.1 webpack-cli@3.3.12

バンドル対象のファイルを準備

- study-webpack
|- dist
|   |- index.html <- index.jsを呼び出すhtmlファイル
|- src
    |- index.js  <- myutilモジュールを呼び出し実行するjsファイル
    |- myutil.js <- 三角形の面積を求める関数などを定義したjsファイル

以下、ソースコード - index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>webpackハンズオン</title>
</head>
<body>
  <p>Hello, webpack</p>
  <script src="./main.js"></script>
</body>
</html>

index.js

var myutil = require('./myutil');

console.log(myutil.APP_NAME);
myutil.hello();
console.log(myutil.Figure.getTriangle(10, 5));

myutil.js

const message = 'こんにちは、webpack！';
const APP_NAME = 'webpackハンズオン';

function hello() {
    console.log(message);
}
class Figure {
  static getTriangle(base, height) {
    return base * height / 2;
  }
}

module.exports = {
  message,
  APP_NAME,
  hello,
  Figure
};

上記ディレクトリ/ファイルが用意できたらバンドルを行う準備は完了です。👍

バンドルの実行

バンドル対象のファイルが準備できたので、以下のコマンドを実行

> ./node_modules/.bin/webpack
Hash: 419eec4e9cda32e1d2f8
Version: webpack 4.44.1
Time: 266ms
Built at: 2020-10-22 01:15:59
  Asset      Size  Chunks             Chunk Names
main.js  1.07 KiB       0  [emitted]  main
Entrypoint main = main.js

実行後、dist配下にmain.jsが作成されていることを確認する。
f:id:kawakeee:20201225002816p:plain