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

便利なWebpack。だけどいざ使い始めるまでには、あれやこれやと多くの初期設定が必要なのが面倒ポイントであります。この記事は、そんなWebpackでES10とSassを変換して束ねて出力するまでの設定をサクっとまとめた、メモ的な記事です。詳しい説明はあまり期待しないでください?。

2020/10/13編集：
MiniCssExtractPluginの読み込みが抜けていたので追加しました。
使用しているパッケージの更新があり、この設定ではうまく動かないようです。近々修正版を2020秋レシピとして公開したいと思います。
2020/10/29編集：
修正した秋レシピを公開しました！

この設定でできること

１．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: {
				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の便利な機能のほんの一部です。どんどんカスタマイズして自分流の設定を見つけてください。ありがとうございました！