webpack.config.jsの内容

補足

当記事はShin Coding Tutorial様のYoutube動画を参考に作成いたしました。

参考動画はこちら

Webpackについて

WebpackはCSSやJavaScriptなどの複数のファイルをまとめる役割を持つモジュールバンドラーです。

本記事では、Webpackの設定ファイルであるwebpack.config.jsの記述について簡潔にまとめました。

webpack.config.js

module.exports = {
  entry: {
    bundle: "./src/index.ts", //バンドルしたいファイルのパス(複数指定可能)
  },
  output: {
    path: `${__dirname}/dist`, //バンドルしたファイルを出力するディレクトリのパス
    filename: "bundle.js", //バンドルしたファイルの名前
  },
  mode: "production", //本番モード(production)か開発モード(development)かの設定
  resolve: {
    extensions: [".ts", ".js"], //バンドルするファイルでts、jsファイルをインポートする際に拡張子を省略する設定
  },
  devServer: {
    static: {
      directory: `${__dirname}/dist`, //ローカルサーバーを立ち上げた時に参照するファイル
    },
    open: true, //ローカルサーバー立ち上げ時に自動でブラウザも立ち上げる設定
  },
  module: {
    rules: [
      {
        test: /\.ts$/, //TypeScriptファイルをコンパイルするよう指定
        loader: "ts-loader", // どのローダーを使うのかの指定(複数指定可能)
      },
    ],
  },
};