💨

Webpackって何

2022/05/09に公開

JavaScript

Node.js

webpack

tech

今回の内容

いつもLinuxの環境構築などでお世話になってるここのサイトから今日はWebpackについて勉強したいと思います( ･ω･ )/

Webpackってなんぞ

Webpackとは

モジュールバンドラー
なんですかそれ
複数のJavaScriptのモジュール(部品)を集めて一つのJSファイルを作成してくれる！
複数のファイルを最小化することで全体の効率が高まり軽量なプログラムにできる
ファイルが一つになることでブラウザからのリクエスト数を減らせる
画像やCSSもバンドルすることが可能

なんかよく分からんけど便利アイテムっぽいぞ(⑅•ᴗ•⑅)

その他のモジュールバンドラー

種類	説明
esbuild	Goで書かれている。速い
parcel	立ち上げに必須な設定がゼロ

使ってみる

ディレクトリの作成、Node.jsの初期化

mkdir sample
cd sample
npm init -y

★npmはNode.jsインストール時に一緒にインストールされます

webpackのインストール

npm install --save-dev webpack (webpack-cli)

webpack-cliはnpx webpackのようにコマンドラインで実行する時に使う

webpack.config.jsの設定

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: `./src/index.js`,
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, 'dist')
  }
};

項目	説明
mode	`development`,`production`,`none`から選べる
entry	エントリーポイント（バンドルの構築を開始する場所）の設定
output	出力先のパスやファイル名を指定

entryはデフォルトでsrc/index.js（＝エントリーファイル）とそこから読み込まれているモジュールをバンドル
outputのpath.join(__dirname, 'dist')現在のディレクトリにdistディレクトリを作成し、その中にmain.jsを作る
dirnameは現在のディレクトリのパスを示す特別な変数。

Scriptの設定

package.jsonのscriptの箇所に以下を記述。

"scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },

--watchオプションを追加すると変更時に開発中にコマンドを実行しなくても勝手にバンドルしてくれる

コンパイルの実行

バンドルを実行する
(以降はwatch modeで勝手にやってくれる)

npm run dev(devはpackage.json内scriptsに記述したもの)

以上、webpackの基本についてでした( ⁎ᵕᴗᵕ⁎ )❤︎

実際にターミナル操作をやってみたいな〜という方はここのサイトで実際にやってみるのがいいかと( •̀ω•́ )/
実際に仮想環境でコマンドをじゃんじゃん叩けるのでパソコンが壊れる心配がなくて良き★
コース全体はこんな感じ

今回の内容

Webpackってなんぞ

使ってみる

Discussion