cssのコンパイル

最終的なファイル構成は以下になる。

webpack-demo
├── dist
│   ├── index.html   　　　#はじめに作っておく
│   └── main.js　　　 　　　# npx webpack時に作成される
├── package.json     　　　# npm init -y で生成
├── package-lock.json 　　 # npm i で生成
├── node_modules          # npm i　で生成
├── src              　　　#srcフォルダとファイルははじめに作っておく
│   ├── index.js     
│   └── style.css
└── webpack.config.js　　　#はじめに作っておく

流れ

最初のファイル設定は以下の通り。

webpack-demo
├── dist
│   └── index.html   　　　#はじめに作っておく
├── src              　　　#srcフォルダとファイルははじめに作っておく
│   ├── index.js     
│   └── style.css
└── webpack.config.js　　　#はじめに作っておく

dist/index.html

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Hello World</h1>
</body>


<!-- コンパイル後のmain.jsを読み込めるようにしておく -->
<script src="main.js"></script>

</html>

src/stule.css

body{
    background: blue;
}

h1{
    color: red;
}

src/index.js

// style.cssを読み込む
import "./style.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // 対象となるファイルの拡張子
        test: /\.css/,
        // ローダー名
        use: [
          // linkタグに出力する機能
          "style-loader",
          // CSSをバンドルするための機能
          {
            loader: "css-loader",
            options: {
              // オプションでCSS内のurl()メソッドの取り込みを禁止する
              url: false
            }
          }
        ]
      }
    ]
  }
};

以下のコマンドを打つことでwebpackのコンパイルが起動

terminal

#nodeの起動
npm init -y 
#nodeのmodulesのインストール
npm i　
#webpackのツールをインストール　　　 
npm i -D webpack webpack-cli style-loader css-loader 
#cssをjavascriptファイルにコンパイル
npx webpack

ちなみにpackage.jsonは以下のようになっている。

{
  "name": "webpack-sample",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.0.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0"
  },
  "description": ""
}

scssのコンパイル

以下のコマンドをうちscssのコンパイルに必要なパッケージをインストールする。

terminal


npm i -D webpack webpack-cli sass-loader sass style-loader css-loader

このときのpackage.jsonは以下のようになる。

{
  "name": "webpack-sample",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.0.0",
    "sass": "^1.28.0",
    "sass-loader": "^10.0.4",
    "style-loader": "^2.0.0",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0"
  },
  "description": ""

次にwebpack.config.jsに以下を記述する。

webpack:config.js


const path = require('path');


module.exports = {
  // modeはproduction/developmentで記述
  // ""で囲むことに注意
  mode: "production",
  // どのファイルを読み込むか　default=> ./src/index.js
  entry: './src/index.js',
  //　entryで読み込んだファイルのコンパイルの吐き出し場所
  output: {
    path: path.resolve(__dirname, 'dist'),
    // distにsample.jsというファイル名で吐き出し
    filename: 'sample.js',
    
  },

  module: {
    rules: [
      // Sassファイルの読み込みとコンパイル
      {
        // 拡張子がsassとscssのファイルを対象とする
        test: /\.s[ac]ss$/i,
        // ローダー名 
        use: [
          // linkタグに出力する機能
          "style-loader",
          // CSSをバンドルするための機能
          "css-loader",
          // sass2css
          "sass-loader",
        ],
      },
      {
        // 対象となるファイルの拡張子
        test: /\.(gif|png|jpg|eot|wof|woff|ttf|svg)$/,
        // 画像をBase64として取り込む
        type: "asset/inline",
      },
    ],
  },
  // ES5(IE11等)向けの指定（webpack 5以上で必要）
  target: ["web", "es5"],
};

注意すべききことは

use内のroaderは下から読み込まれていく。

すなわち、
sass-loader→css-loader→style-loader
の順番で読み込まれていく。

scss2css → css2js → js2node
の順番にしなければならないためroaderの順番を変えてはいけない。

参考記事

[最新版で学ぶwebpack 5入門スタイルシート(CSS/Sass)を取り込む方法]
(https://ics.media/entry/17376/)

[Configration | webpack]
(https://webpack.js.org/configuration/)

[sass-loader - Webpack - JS.ORG]
(https://webpack.js.org/loaders/sass-loader/)