ファイルの外殻

webpack.config.jsは以下の内容が基本になる。module.exports = { }の中に設定を追記していく。

const path = require('path')
module.exports = { }

mode

development、production、noneのいずれか。developmentの場合は開発向けに最適化された挙動になり、productionの場合は本番用のファイル出力に最適化された挙動になる。具体的にはファイルの圧縮を行うかなどの差異がある。

module.exports = {
  mode: 'development'
}

entry

エントリーポイントの指定をする。

module.exports = {
  entry: 'ファイルパス'
}

TODO 配列を指定できるようなので指定した場合の挙動について確認

output

ファイルの出力先などの設定をする。

const path = require('path')
module.exports = {
  output: {
    path: path.resolve(__dirname, '出力先ディレクトリ'),
    filename: 'ファイル名',
  }
}

pathの指定内容は定型文になっている。絶対パスを指定する必要があり、OSなどによってパスが変わらないようにするためにこのような記述をする。

module

モジュールに関する設定をする。

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, 'src/scss'),
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

module.rules

rulesに実行するloaderの設定を記述する。

testは対象のファイル名を正規表現で指定。

includeは対象のファイルが格納されているディレクトリを指定。

useには実行するローダーを実行する逆順で指定する。つまり、最初に実行するローダーを最後に、最後に実行するローダーを最初に指定する。