webpackのロゴ

皆さんこんばん。Yuap Techの竹村です。

Webpackをやさしく丁寧に学んでいきたいと思います。

プロジェクトを作成

プロジェクトを作成していきましょう。

$ mkdir webpack-learning
$ cd webpack-learning
$ mkdir src
$ touch src/index.js

index.jsファイルに以下のコードを記述します。

var string = 'webpackを勉強中!';
console.log(string);

initコマンドでnpmを初期化して、package.jsonファイルを作成します。

$ npm init -y

{
  "name": "webpack-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

現在のディレクトリ構造はこちらです。

webpack-learning/
├── package.json
└── src
    └── index.js

webpackをインストール

それでは、webpackをインストールしていきましょう。

$ npm install webpack webpack-cli --save-dev

ディレクトリ構造はこうなります。

webpack-learning/
├── node_modules
├── package-lock.json
├── package.json
└── src
    └── index.js

webpack関連のモジュールをインストールしたことで、コマンドひとつでバンドルが可能になりました。

デフォルトでは、/src/index.jsが読み込まれるような設定になっています。

npxコマンドでindex.jsファイルをバンドルしてみましょう。

$ npx webpack

Hash: 439f3666c75035dec9cb
Version: webpack 4.25.1
Time: 334ms
Built at: 2018-11-08 17:47:57
  Asset       Size  Chunks             Chunk Names
main.js  956 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 49 bytes {0} [built]

distディレクトリが作成されて、その中にmain.jsというファイルが生成されました。

現在のディレクトリ構造はこのようになっています。

├── dist
│   └── main.js
├── node_modules
├── package-lock.json
├── package.json
└── src
    └── index.js

それでは、HTMLファイルからmain.jsを読み込んでみましょう。

$ touch dist/index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack-learning</title>
  </head>
  <body>
    <h1>Hello Webpack!</h1>
    <script src="./main.js"></script>
  </body>
</html>

Chromeでindex.htmlを開き、コンソールを確認します。

次のようにちゃんと動作していることが分かります。

Chromeの開発ツールのスクリーンショット

webpack勉強中!を出力できましたね。

複数のファイルを一つにまとめる

次は2つのJavascriptファイルをまとめてバンドル(import)してみましょう。

まず、src/index.jsファイルを編集します。

import Bye from './bye.js'

var bye = new Bye();
bye.say();
bye.reply();

次に、srcディレクトリ内にbye.jsファイルを作成します。

$ touch src/bye.js
export default class Bye {
  say() {
    console.log('Bye!');
  }
  reply() {
    console.log('Ok, see you next!')
  }
}

それでは、npxコマンドででコンパイルしましょう。

$ npx webpack

Hash: 615aea2190b1b966a32f
Version: webpack 4.25.1
Time: 334ms
Built at: 2018-11-08 18:05:25
  Asset      Size  Chunks             Chunk Names
main.js  1.03 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 206 bytes {0} [built]
    | ./src/index.js 85 bytes [built]
    | ./src/bye.js 121 bytes [built]

↓ようにコンソール出力がされていれば成功です。

Chrome開発ツールのスクリーンショット

まとめ

Webpackは複数のJavascript, HTML, CSSといった静的なファイルをまとめてバンドルしてくれるツールです。

近年、Webフロントエンド開発の現場では必須のツールになっています。

非常にシンプルなものでしたが、モジュール化を駆使することで、一つのJavascriptファイルにまとめられるため、巻数の呼び出しなどで考慮すべきことが減ります。

ぜひ一度、実装してみてください。

PROFILE

はじめまして、大阪のWeb制作会社Yuapです。「Yuap(ユアプ)」とは英語で「あなたのプランナー」という、Your Plannerの頭文字をとった社名です。 ホームページ制作|Webシステム開発|Webコンサルティングなどの業務を通じて、みなさまの事業の成長に貢献できるようなプランナーになれるよう、日々チャレンジしております。

※お問い合わせ・お見積りは無料です。 IT|ホームページ|Webシステムのことならなんでもお気軽にご相談ください。お問い合わせはこちらから。