webpack5でJSとSassをコンパイル(CSSを別ファイルに出力)

webpack5を使ってJavaScriptとSassをコンパイルする方法を記録しておきます。

この記事では、以下の項目をコンパイル条件としています。

  • JavaScriptとCSSを別々のファイルで出力する。
  • 出力先のCSSに自動でベンダープレフィックスを追加する。
  • production(本番環境用に)出力する場合のみコードを圧縮(軽量化)する。
  • development(開発環境用に)出力する場合のみソースマップを出力する。

node.js(npm)のインストール

コンパイルするにはnpmが必要です。npmはnode.jsのパッケージ管理システムなので、まずPCにnode.jsをインストールします。すると同時にnpmもインストールされます。

node.js公式
https://nodejs.org/ja/

npmのセットアップ

node.jsをインストールしたら、npmのセットアップをしておきます。

プロジェクトフォルダ内で以下のコマンド

-yesオプションを付けると、セットアップ項目が全てデフォルトで設定されます。(付けない場合は、項目毎にEnterを押すか入力が必要)

実行すると、プロジェクトフォルダ内に「package.json」というファイルができます。

「package.json」はnpmの設定やインストールパッケージの管理情報が書かれているファイルです。

webpack5のインストール

次にコンパイルツールのwebpackをインストールします。バージョン指定しなければ最新(現時点では5.x系)が入ります。

-g:グローバルインストール
–save-dev:プロジェクト単位インストール(-D でも可)

実行すると、プロジェクトフォルダ内に「package-lock.json」というファイルと「node_modules」というフォルダができます。

webpack-cliのインストール

webpack5を使うためには必須。

必要なパッケージのインストール

ここでコンパイルに必要なパッケージのインストールをしていきます。

不要なパッケージはスキップ、追加したいパッケージがあれば追加しても良いですが、今回は、冒頭で書いた内容でのコンパイルを目指しているので、パッケージが変わると、この後の工程で出てくる「webpack.config.js」への記入内容が変わってくるのでご注意ください。

css-loader

CSSファイルをJS用モジュールにコンパイルするパッケージ。

sass-loader

Sass / SCSSファイルをロードし、CSSにコンパイルするパッケージ。sassも一緒にインストール。

postcss-loader

「PostCSS」を使ってsassをコンパイルするためのパッケージ。なので「PostCSS」も同時にインストールする。今回は自動でベンダープレフィックスを付けるための「autoprefixer」用に使用します。

MiniCssExtractPlugin

JS内に内包されたCSSを抽出して別ファイルとして出力するプラグイン。このプラグインを使用しない場合は、通常JS内にCSS情報が書き込まれる。その場合、CSSとしてHTML上で機能させるためには、「style-loader」というパッケージが必要。今回は別出力するので「style-loader」は使用しない。

webpack-fix-style-only-entries

「MiniCssExtractPlugin」を使ってCSSファイルを出力する際に、一緒に出力されてしまう不要なJSファイル(MiniCssExtractPluginのバグ?)を削除してくれるプラグイン。

autoprefixer

sassをコンパイルする際にベンダープレフィックスを自動で付与してくれる。postcss-loaderのプラグイン。

Clean plugin for webpack

出力先のフォルダ内のファイルを一旦きれいに(削除)してくれるプラグイン。開発用に書き出されたソースマップファイルを本番コンパイル時には削除したい場合などに便利。

webpack.config.jsの確認

以上のパッケージやプラグインをインストールしたら、「webpack.config.js」を確認してみましょう。以下のようにインストールパッケージのリストが書き込まれているはずです。

エントリーポイント(コンパイル元)と出力先フォルダを作成

一般的にコンパイル元のフォルダとして「src」、出力先フォルダとして「dist」という名前にするのが一般的です。今回はその中にさらに「js」「sass」や「css」というフォルダを作成してみます。全体のファイル構成は以下の通り。「dist」フォルダは作らなくてもコンパイル時に作成されます。

[プロジェクトフォルダ]
     ├dist/
       ├ js/
       └ css/
     ├node_modules/
     ├src/
       ├ js/
       └ sass/
     ├ package.json
     ├ package-lock.json
     ├ postcss.config.js
     └ webpack.config.js

上記の図にまだないファイルが2つありますね。次に「postcss.config.js」と「webpack.config.js」を作っていきます。

webpack.config.jsの作成

「webpack.config.js」はコンパイルの仕方などを記した設定ファイルです。今回の記事と同じ条件でコンパイルする場合は、以下の内容をそのままコピペで問題ありません。

postcss.config.jsの作成

こちらは、PostCSS用の設定ファイルです。「webpack.config.js」内にpostcss-loaderのオプションとして記入することもできますが、今回は別ファイルで作成してみます。postcss-loaderは自動的にこのファイルを読みにいってくれます。autoprefixerをプラグインとして読み込んでいます。こちらも同条件ならコピペでOK。

コンパイル

コンパイルしたいjsファイルとsassファイルを用意します。今回「webpack.config.js」のentry:に記載した例では、以下の場所にそれぞれコンパイル用ファイルを用意する必要があります。変更する場合は、entry:を書き換えてください。

src/js/index.js
src/sass/index.scss

以上でコンパイルする準備が整いました。以下のコマンドでコンパイルしてみましょう。

「dist」フォルダにコンパイルされたjsファイルやcssファイルが出力されていれば成功です。

package.jsonのカスタマイズ

「package.json」をカスタマイズすることで、オリジナルのコマンドを作成することができます。例えば、"scripts":のところへ以下のように追記します。

上記の場合、以下のようなコマンドで様々なコンパイルを実行できるようになります。

コマンド コンパイル内容
$ npm run build デフォルトの設定でコンパイル。
$ npm run prod 本番環境用に出力。
$ npm run dev 開発環境用に出力。ソースマップも出力。
$ npm run watch エントリーポイントのファイルを監視して、変更があれば自動でコンパイル。

メモ

最初に記載した今回のコンパイル条件の中に、「production(本番環境用に)出力する場合のみコードを圧縮(軽量化)する。」という項目がありますが、こちらは特にプラグインを使用せずともwebpackが対応してくれます。webpack5から追加された機能とのこと。webpack4の場合は、「Optimize CSS Assets Webpack Plugin」というプラグインで対応可能。

Optimize CSS Assets Webpack Plugin

「cssnano」を使用してCSSファイルを圧縮、最適化して出力してくれるwebpack4用プラグイン。

webpack5の場合は、代わりに「CssMinimizerWebpackPlugin」を使う。しかしwebpack5でこれを入れるとJavaScriptの方の圧縮が解除されてしまうので、JavaScript圧縮用のプラグインも同時使用する必要がある。例えば、「TerserWebpackPlugin」など。そもそもwebpack5は標準で圧縮してくれるのでこれらのプラグインは不要ですよね。。。