webpackについて

[KeihakuOh]

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './client/index.js',
  output: {
    path: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        use: ['style-loader', 'css-loader'],
        test: /\.css$/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'client/index.html'
    })
  ]
};

entry: './client/index.js', Webpack は、どこからアプリケーションを読み込み始めるか（エントリーポイント）を指定する必要があります。ここでは、./client/index.js というファイルからアプリケーションを開始して、そこから必要なモジュールをすべて読み込んでバンドルします。

output: {
  path: '/',
  filename: 'bundle.js'
}

Webpack はバンドルした結果のファイルを出力します。この output セクションでは、出力先のディレクトリとファイル名を指定します。ここでは、bundle.js というファイル名で出力され、path に '/' が指定されていますが、通常は絶対パス（例: dist/）を指定します。つまり、ビルド後のファイルが bundle.js という名前で生成されます。

module: {
  rules: [
    {
      use: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    },
    {
      use: ['style-loader', 'css-loader'],
      test: /\.css$/
    }
  ]
}

babel-loader (JavaScript)

test: /.js$/: 拡張子が .js のファイルを対象にします。 use: 'babel-loader': Babel を使って JavaScript のコードを変換します。Babel は JSX や ES6 の構文を、古いブラウザでも動くように変換します。 exclude: /node_modules/: node_modules 内のファイルは変換の対象外にします。 CSS ローダー

test: /.css$/: .css ファイルを対象にします。 use: ['style-loader', 'css-loader']: css-loader: CSS ファイルを JavaScript のモジュールとして読み込む。 style-loader: CSS を