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/)