CSSや画像をJSに変換したり、ES6のコードをES5に変換するなどの役割を持つものをローダーという。ESLintを実行するものなど変換を伴わないものもローダーに含まれる。

Babel

yarn add --dev babel-loader @babel/preset-env @babel/core

babel-loader

ES6をES5に変換したり、TypeScriptをJSに変換するBabelを実行するローダー。

@babel/preset-env

指定したブラウザやNodeのバージョンで実行できるJSに変換するプリセット。プリセットはプラグインのコレクションを意味するっぽい。

Sass

yarn add --dev sass sass-loader css-loader style-loader

// webpack.config.js の rules 設定
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, 'src/scss'),
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }

エントリポイントのjsからscssファイルをimportする。

sass-loader

SassをCSSにコンパイルするローダー。

css-loader

CSSをJSのモジュールにするローダー。

style-loader

バンドルされたCSSをHTMLのstyleタグとして適用するローダー。

PostCSS

PostCSSはCSSを処理するためのフレームワークみたいなもの。PostCSSを利用して、CSSのlinterやベンダープレフィックスを処理するAutoprefixerなどが作られている。

Autoprefixer

必要なベンダープレフィックスを付与してくれるPostCSSのプラグイン。

yarn add --dev postcss-loader postcss autoprefixer