webpack

• webpack
  • 概要
  • インストール
  • コマンド
  • 設定ファイル
  • 開発環境

概要

複数のjs,css,pngファイルなどを1つのファイルにまとめることで、結果的に1つのファイルしか読み込まなくていいようにする

インストール

npm install webpack

コマンド

# 基本コマンド jsファイルをひとまとめにする
npx webpack

# 差分ビルド
npx webpack --watch

# ビルドの進行状況をリアルタイムで確認できる
npx webpack --progress

# 開発モード デバッグや修正を容易にするための設定が自動で有効になる。ファイルは圧縮されず、人間が読める形で出力されることが一般的
npx webpack --mode development

# 本番モード　最適化が自動的に有効化され、軽量かつ高速なバンドルファイルが生成される
npx webpack --mode production

設定ファイル

• webpack.config.jsで設定可能

module.export = {
  // エントリーポイント
  entry: "./src/index.js",

  output: {
    // ファイル出力先のパス
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "main.js"
  },
  // developmentとproductionがある
  mode: development
};

開発環境

• webpack専用のローカルサーバーが構築可能なwebpack-dev-serverがある

# インストール
npm install webpack-dev-server

# 起動
npx webpack server

• webpack-dev-serverの設定

module.export = {
...
  // ローカルサーバーの設定
  devServer: {
    static: "dist",
    open: true,
  },
};