webpackでCSSやSassファイルをバンドルする

webpackでCSSやSassファイルをバンドルする方法をメモ。

サンプルコード

プロジェクトディレクトリに移動後、package.jsonを作成します。

npm init

使用するプラグインをインストールします。

npm install webpack webpack-cli style-loader css-loader --save-dev

プロジェクトディレクトリ内にsrcディレクトリを作成して、その中にindex.jsとstyle.cssを作成します。

index.js

import "./style.css";
console.log('hello world');

style.css

html {
  background: orange;
}

webpack.config.jsで以下のように設定します。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              url: false
            }
          }
        ]
      }
    ]
  }
};

ビルドを行うと、CSSを生成ファイル内に取り込むことができました。
CSSファイルをバンドルするデモページ

次にSassファイルのバンドルを試してみます。
先ほどの例にプラグインを追加します。

npm install sass-loader sass --save-dev

index.jsで読み込むファイルをSassに変更します。

import "./style.scss";
console.log('hello world');

style.scssを作成します。

html {
  background: purple;
}

webpack.config.jsを以下のように書き換えます。

module.exports = {
  mode: "production",
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              url: false
            }
          },
          "sass-loader"
        ]
      }
    ]
  }
};

これでSassファイルをバンドルすることができました。
Sassファイルをバンドルするデモページ