Webpackの設定ファイルの書き方

はじめに

Webpackは、モダンなJavaScriptアプリケーションのための静的モジュールバンドラーです。
このツールを使用することで、複雑な依存関係を持つプロジェクトを効率的にビルドできます。
Webpackの設定ファイル（webpack.config.js）の基本的な書き方についてまとめます。
APIのURLなどは仮のものに設定していますので、環境に合わせて変更します。

基本設定

以下に示すのは、一般的なWebpack設定ファイルの例です。この設定ファイルには、Vue.jsのプロジェクトで使用するための設定も含まれています。

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const webpack = require("webpack");
const isProduction = process.env.NODE_ENV === "production";
const CopyFilePlugin = require("copy-webpack-plugin");

let host = "http://localhost";
let testGet = "/api/testget/${id}";

switch (process.env.NODE_ENV) {
  case "production":
    host = "https://example.com";
    break;
  case "develop":
    host = "https://dev.example.com";
    break;
  case "local":
    host = "http://localhost:8133";
    break;
  default:
    // ローカル開発モック用
    testGet = "/${id}.json";
    host = "/";
    break;
}

const gMixinScss = [path.resolve(__dirname, "./src/scss/mixin.scss")];

module.exports = {
  entry: {
    main: "./src/index.js",
    secondary: "./src/secondary.js",
  },
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "[name].js",
  },
  mode: isProduction ? "production" : "development",
  devtool: isProduction ? false : "source-map",
  plugins: [
    new VueLoaderPlugin(),
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: !isProduction,
      __HOST__: JSON.stringify(host),
      __API_PATH__: JSON.stringify(testGet),
    }),
    new CopyFilePlugin({
      patterns: [
        { from: "./src/index.html", to: "index.html" },
        { from: "./src/data/*.json", to: "[name][ext]" },
        { from: "./src/img/", to: "img" },
      ],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        loader: "babel-loader",
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "vue-style-loader", "css-loader"],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
          {
            loader: "sass-resources-loader",
            options: {
              resources: gMixinScss,
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
};

各設定項目の説明

entry

エントリーポイントは、Webpackが依存関係の解析を開始するファイルを指します。複数のエントリーポイントを指定することも可能です。

entry: {
  main: "./src/index.js",
  secondary: "./src/secondary.js",
},

output

出力設定は、バンドルされたファイルの出力先ディレクトリやファイル名を指定します。

output: {
  path: path.resolve(__dirname, "public"),
  filename: "[name].js",
},

mode

ビルドモードを指定します。productionモードではコードの最適化が行われ、developmentモードではソースマップが生成されます。

mode: isProduction ? "production" : "development",

devtool

ソースマップの生成を制御します。開発時にはsource-mapを使用し、プロダクションビルドではソースマップを生成しない設定にしています。

devtool: isProduction ? false : "source-map",

plugins

プラグインは、Webpackのビルドプロセスを拡張するために使用します。以下のプラグインを使用しています。

VueLoaderPlugin: Vue.jsファイルの処理をサポート。
webpack.DefinePlugin: グローバル定数を定義。
CopyFilePlugin: 静的ファイルを出力ディレクトリにコピー。

plugins: [
  new VueLoaderPlugin(),
  new webpack.DefinePlugin({
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: !isProduction,
    __HOST__: JSON.stringify(host),
    __API_PATH__: JSON.stringify(testGet),
  }),
  new CopyFilePlugin({
    patterns: [
      { from: "./src/index.html", to: "index.html" },
      { from: "./src/data/*.json", to: "[name][ext]" },
      { from: "./src/img/", to: "img" },
    ],
  }),
],

module

モジュールのルールを定義します。各ファイルタイプに対して適切なローダーを設定します。

module: {
  rules: [
    {
      test: /\.(js|jsx)$/i,
      loader: "babel-loader",
    },
    {
      test: /\.css$/i,
      use: ["style-loader", "vue-style-loader", "css-loader"],
    },
    {
      test: /\.vue$/,
      loader: "vue-loader",
    },
    {
      test: /\.s[ac]ss$/i,
      use: [
        "style-loader",
        "css-loader",
        "sass-loader",
        {
          loader: "sass-resources-loader",
          options: {
            resources: gMixinScss,
          },
        },
      ],
    },
    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: "file-loader",
        },
      ],
    },
  ],
},

まとめ

この記事では、Webpackの設定ファイルの基本的な書き方と主要な設定項目について解説しました。
Webpackを使用することで、効率的なビルドプロセスを実現し、モダンなJavaScriptアプリケーションの開発をスムーズに進めることができます。