webpackのrulesってどうなってるの

webpack

2020.06.20

こんばんは。ファガイです。
今回は雑なメモです。

webpackをなんとなくあったものを使ってきた民だったので、どれがどうなってるのかを考えたりせずになんか不思議な力で読み込んでやってるものだという認識がありました。

webpack公式のドキュメントをみるに、モジュール生成時にマッチしたらそのルールを適用するというもののよう。

より理解しやすくいえばimportがされたときに自動的にrulesにあったもの(test)があればuseを適用するということですね。
渡される情報はどうやらそのimportしたファイルの文字列が渡される様子。

なので、loaderは文字列をもらったものを書き換えて文字列を返すってことを基本的にやってるってわけですね。
そしてloaderは上からじゃなくて、下から順番に読まれるので注意です！

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // CSSをDOMに展開する
          'style-loader',
          // CSSをCommonJSで読めるように変換する
          'css-loader',
          // SassをCSSに変換する
          'sass-loader',
        ],
      },
    ],
  },
};

これだと、s[ac]cssの拡張子のファイルがimportされるときにsass-loader→css-loader→style-loaderの順番で読み込まれていきます。

そして、このuseが終わった後にはjsで読める形になっていれば良いということですねー。

あくまでもjs上で動いていることを認識していれば良いと思います。