【秋】手っ取り早くES10とSassで書きたい人の為のWebpackレシピ

先月夏レシピとして公開したWebpack設定例ですが、いろいろなアップデートによりもう使えなくなってしまいました?なので修正版を秋レシピとして公開します。前回からの変更点はpostcss-loaderの設定の書き方を少し変えただけです。前の設定で動かなかった場合はココあたりを変更してみてください。

この記事は、WebpackでES10とSassを変換して束ねて出力するまでの設定をサクっとまとめた、メモ的な記事です。詳しい説明はあまり期待しないでください?。

この設定でできること

１．jsファイルをバンドルする。
２．ES10の書式をES5へ変換する。
３．SassファイルをCSSへ変換する。
４．CSSにベンダープレフィックスを付ける。
５．変換されたjs・CSSをファイルに出力する。

※変換ターゲットブラウザは “>1% in JP, not ie 11” で進めていきます。IE11に対応する場合は追加設定が必要になるので注意してください。

プロジェクトの作成

npmプロジェクトの作成

npm init -y

Webpackの設定

今回の主役、Webpackをインストールします。

インストール

npm install webpack webpack-cli -D

コマンド内の「 -D 」は –save-dev の略です。大文字なので気をつけてください。

webpack.config.js の作成

プロジェクトフォルダに webpack.config.js ファイルを作成し、下のようにします。

const path = require('path');
module.exports = {
	mode: 'production',
	entry: './src/index.js', 
	output: {
		filename: 'main.js',
		path: path.resolve(__dirname, 'dist/js'),
	}
};

この設定で src/index.js をWebpackの対象にし、出力を dist/js/main.js にします。

package.json の設定

scripts内のtestを削除し、Webpack用のコマンドを追加します。

"scripts": {
	"build": "webpack",
	"watch": "webpack --watch"
},

scriptsにコマンドを追加すると、 npm run build でWebpackを実行、 npm run watch でファイルの更新時に自動でWebpackを実行できるようになります。必要に応じて使い分けてください。

ここまでで、Webpackの基本的な機能であるjsファイルのバンドルが使えるようになります。

js変換の設定

ES10をES5へ変換するためのBabelをインストールします。

インストール

npm install @babel/core @babel/cli @babel/preset-env babel-loader core-js regenerator-runtime -D

webpack.config.js にBabelの設定を追加

jsファイルをBabelに読み込ませるために、module.exports 内に下の内容を追加します。

module: {
	rules: [
		{ 
			test: /\.js$/,
			exclude: /node_modules/,
			use: {
				loader: 'babel-loader',
				options: {
					presets: [['@babel/preset-env', {
						useBuiltIns: "usage",
						corejs: 3,
						modules: false
					}]]
				}
			}
		},
	]
},

package.json に変換対象ブラウザの設定を追加

下の内容を追加します。ここで指定されたブラウザで動くようにjsやCSSが変換されます。

"browserslist": [
	">1% in JP",
	"not ie 11"
]

src/index.js にモジュールのインポートを追加

jsをES5に変換するために必要なモジュールのインポートを、index.js 内の一番最初へ追加します。

import "core-js/stable";
import "regenerator-runtime/runtime";

ここまでで、ES10のコードがES5へ変換され、browserslistで指定したブラウザでコードが動くようになります。

Sass変換の設定

SassをCSSへ変換するためのsass-loaderなどをインストールします。

インストール

npm install css-loader sass-loader node-sass postcss-loader autoprefixer mini-css-extract-plugin -D

webpack.config.js にSassの設定を追加

Sassファイルを変換し、ベンダープレフィックスを付けるために、module の rules 内に下の内容を追加します。

{
	test: /\.(sa|sc|c)ss$/,
	exclude: /node_modules/,
	use: [
		MiniCssExtractPlugin.loader,
		{
			loader: 'css-loader',
			options: { url: false }
		},
		{
			loader: 'postcss-loader',
			options: {
				postcssOptions: {
					plugins: [ require('autoprefixer') ]
				}
			}
		},
		'sass-loader'
	]
}

変換したCSSをファイルで出力するために、module.exports 内に下の内容を追加します。

plugins: [
	new MiniCssExtractPlugin({
		filename: '../css/style.css'
	})
],

MiniCssExtractPluginを読み込みます。1行目に下の内容を追加します。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

src/index.js にSassファイルのインポートを追加

SassファイルをWebpackの処理対象として認識するために、下の内容を追加します。

import './style.scss';

ここまでで、Sassファイルを変換してCSSとして出力できるようになりました。

ビルドする

以上でWebpackの設定はおわりです。コードを書いたらコマンドでビルドをします。

npm run build

問題がなければ dist フォルダ内にjsとcssファイルが生成されます。

以上です！ありがとうございました。

今回作成したwebpack.config.jsはここに置いておきます。参考にしてください。
https://pastebin.com/K2WyQfxj

執筆時にインストールしたパッケージバージョン

"@babel/cli": "^7.12.1",
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.1.0",
"core-js": "^3.6.5",
"css-loader": "^5.0.0",
"mini-css-extract-plugin": "^1.2.1",
"node-sass": "^4.14.1",
"postcss-loader": "^4.0.4",
"regenerator-runtime": "^0.13.7",
"sass-loader": "^10.0.4",
"webpack": "^5.3.0",
"webpack-cli": "^4.1.0"