webpack の使い方

「webpack」の使い方をまとめました。

1. webpack

「webpack」は、JavaScript、CSS、画像などを1つのファイルにまとめるツールです。

webpack

特徴は次のとおりです。

・JavaScriptの依存関係を自動的に解決
従来のJavaScriptの依存関係はhtmlに<script>を記述する必要があり、複雑になりがちでした。「webpack」では、importでモジュール指定するだけで依存関係を自動的に解決します。

・ 1つのファイルにまとめることで通信回数を抑える
従来のJavaScriptはモジュールが増えると通信回数も増えてボトルネックになっていました。「webpack」では、モジュールを1つのファイルにまとめて、これを解決します。

2. webpackのインストール

(1) Node.jsのプロジェクトの準備。

(2) 以下のコマンドで、webpackをインストール。

$ npm i -D webpack webpack-cli

3. webpackの使い方

(1) インポート元となるモジュールの準備。
公開する変数、関数、クラスには「export」を指定します。

・src/calc.js

// 加算
export function add(a, b) {
  return a + b
}

// 乗算
export function mul(a, b) {
  return a * b
}

(2) インポート先となるモジュールの準備。

・src/index.js

import * as c from './calc.js'

console.log(c.add(3, 3))
console.log(c.mul(3, 3))

(3) webpackの設定ファイルの準備。
プロジェクトフォルダ直下にwebpackの設定ファイルを作成します。

・webpack.config.js

module.exports = {
  mode:'development',　        // モード (development or production)
  entry:'./src/index.js',      // 入力元ファイルパス
  output: {
    path: `${__dirname}/dist`, // 出力先フォルダパス
    filename: 'index.js'       // 出力先ファイル名
  },
}

モードは次のとおりです。

・development : 開発用。改行、空白、コメントなどを残す。
・production : 本番用。改行、空白、コメントなどを消す。

(3) 以下のコマンドで1つのモジュールにまとめる。
「./dist/index.js」が出力されます。

$ webpack

(4) 動作確認

$ node ./dist/index.js
6
9

4. モジュールのインポート方法

(1) モジュールに別名を指定してインポート。

import * as c from './calc.js'

console.log(c.add(3, 3))
console.log(c.mul(3, 3))

(2) モジュール内の変数・関数・クラスを指定してインポート。

import {add, mul} from './calc.js'

console.log(add(3, 3))
console.log(mul(3, 3))

(3) モジュール内の変数・関数・クラスに別名を指定してインポート。

import {add as addF, mul as mulF} from './calc.js'

console.log(addF(3, 3))
console.log(mulF(3, 3))

(4) export defaultによるインポート
公開されている変数・関数・クラスがひとつだけの時は、「export default」でデフォルトを指定することができます。

export default function add(a, b) {
  return a + b
}

import addF from './calc.js'

console.log(addF(3, 3))