webpack.config.jsの記述について #webpack.config.js

webpack.config.js は webpackの設定ファイルです。エントリーポイントや、ファイルの出力場所、プラグインなどを設定することができます。

サンプル

webpack.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    index: path.join(__dirname, 'src', 'index.js')
  },
  output: {
    path: path.join(__dirname, 'out'),
    filename: 'main.js'
  },
  devtool: 'cheap-module-eval-source-map',
  target: 'node',
  module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
      },
    },
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"],
    }
  ]
}

entry : バンドルの起点となるファイルを指定します。ファイルの依存関係を解決しながらバンドルされます。
output : 出力先のディレクトリやファイル名を指定します。特に指定しなければ、distディレクトにmain.jsが出力される初期設定です。

path.join : Node.jsの標準モジュールpathが提供しているメソッドです。ディレクトリ名を表すパスと、ディレクトリ名あるいはファイル名を結合します。
__dirname : 現在実行中のソースコードが格納されているディレクトリパスが格納されています。

path: path.join(__dirname, 'out'),

devtool : ソースマップ生成の有無と、どのように生成されるかを指定するオプションです。細かい設定を行うにはソースマップのスタイルを選択します。
※SourceMap = オリジナルファイルから変換されたソースをマップしたファイルで、ブラウザがオリジナルのソースを再構築し、その再構築されたオリジナルを表示できるようにするもの

module: Webpack がどのようにモジュールを読み込み、変換するかを定義するためのオブジェクトです。
rules : 読み込まれたモジュールに対して、どのような変換を適用するかを定義するためのプロパティです。

この例では、JSファイルの変換に babel-loader を使用し、CSSファイルの変換に style-loader と css-loader を使用するルールが定義されています。testプロパティは、ファイルのパスに正規表現を適用して、対象のファイルかどうかを判別します。useプロパティは、各ルールがファイルに適用するloaderを定義します。excludeプロパティは、変換の対象から除外するディレクトリを指定するためのオプションです。

最後に

ReactやTypescriptなどを使用する場合の記述は異なるので、使いながら学んでいこうと思います。