ファイルの外殻

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には実行するローダーを実行する逆順で指定する。つまり、最初に実行するローダーを最後に、最後に実行するローダーを最初に指定する。