Zenn
🎮

一からwebpackに入門してみる

2021/05/16に公開
HTML
JavaScript
Node.js
webpack
npm
tech

はじめに

対象読者：Javascirptというスクリプト言語を知っており、なんとなくnpmを使ったことがある人。
目的：なんとなくwebpackについての概要を知る

近年のjavascriptの背景状況を把握しwebpackの位置づけを理解、実際に使ってみることでなんとなくWebpackについて知った気になることが目標。

Javascriptの背景状況

近年、サイト構成が複雑になるにしたがってJavascirpt構成も肥大化していった。
scriptを別ファイルに分けた際、そこに依存関係が発生しているとscriptの読み込みの順番も工夫する必要が出てきた。

<script src="./B.js"></script>
<script src="./C.js"></script>
<script src="./A.js"></script>

上記はAがB,Cに依存している例。
Aを読み込む前にBとCを読み込む必要がある。

ファイルが少なければ手動管理ができるが、ファイルが膨大になると手動で管理することが困難になってきた。

この問題を解決するためにJavascriptでは「モジュール」という概念がある。jsプログラムを分割し、必要なタイミングでインポートをすることで読み込みの管理が容易になった。

import B from './B.js'
import C from './C.js'

これをAに記入することでAを読み込んだ際に依存状態であるB,Cも読み込むことができる。

バンドル化

このような背景から、javascriptはモジュールごとにファイルを分ける等、さらにファイル数が増大する傾向になった。
しかし新しい問題として「ブラウザとサーバーの同時接続に限界があるため、複数ファイルの転送に時間がかかる」というものが出てきた。この解決方法として挙げられたのが「バンドル化」。

バンドル化を行うと膨大なjsファイルを一つにまとめることができる。これによってサーバーへのリクエスト数を減らすことができ、読み込み時間の短縮が見込める。このバンドル化の過程でjsファイルの読み込み等を行う必要があるため、nodeJS環境が必要になる。

webpackとは

webpackとはバンドル化、つまり複数のJavascriptまとめて一つのファイルにすることができるツール。これによって先に述べた読み込み時間の短縮が可能になる。

追加機能として

  • JSファイルの圧縮
  • CSSやimageなどを含めたバンドル化
  • ローカルサーバーの起動環境の提供
    など、バンドル化以外にも様々な機能がある。これによって色々なライブラリをいれることなくwebpackのみで完結させることができる優位性が出てくる。

実際にwebpackを使ってみる

大体のバンドル化されるまでの流れ

  1. srcフォルダにindex.jsを用意
  2. webpackの設定に従ってファイルが読み込まれる
  3. バンドル化が行われ、outputに指定したdistフォルダに出力される
  4. バンドル化されたjsをhtmlファイルで開くと正常に動作する

今回使うもの

webpack：バンドルツール、今回の主役
webpack-cli：webpackのコマンド等を柔軟に提供するらしい。ほぼ必須。
winbox：最近流行ってるやつ。簡単にDnDできるウィンドウを生成できる。今回はこのライブラリをimportしてhtmlに表示できれば成功

手順

  1. yarn init (npm init)
  2. 各ライブラリをadd
yarn add webpack webpack-cli winbox
  1. srcディレクトリを作成、中にindex.jsを作りコードを記入。今回はimportしてウインドウを出すだけ。
import 'winbox'
console.log("hello world!")
new WinBox("Basic Window")
  1. webpack.config.jsを作成し記入
module.exports = {
  // モードの設定
  mode: 'development',
  // エントリーポイントの設定
  entry: './src/index.js',
  // 出力の設定
  output: {
    // 出力するファイル名
    filename: 'main.js',
    // 出力先のパス(絶対パスを記入する)
    path: `${__dirname}/dist`
  },
};

  1. yarn webpackでビルド。ビルド結果はoutputの指定先に入る。今回はdistディレクトリ。

  2. htmlでビルドしたmain.jsを読み込んでみる。今回はdistにindex.htmlを作る。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script defer src="./main.js"></script>
  <title>webpackコトハジメ</title>
</head>
<body>
</body>
</html>

完成。成功するとこうなる。

まとめ

  • webpackは複数のjsモジュールを一つのjsとしてまとめるツール
  • まとめる際にファイル圧縮をしてくれたりする
  • jsファイルの読み込み、書き込みをするためnodeJS環境が必要になる。

参考サイト

https://ics.media/entry/12140/

誤字、脱字、ご指摘等あればコメントかTwitterまでよろしくお願いします。

Discussion