webpack4 で sassからcss に変換と圧縮をして出力する

webpack で、sass を css に変換、圧縮を行い javascript ファイルとは別に css ファイルとして出力します。

webpack

webpack は javascript モジュールをまとめ、コンパイルすることができるモジュールバンドラーです。

webpack で javascript をバンドルする

terser(uglifyJs)

terser は、ES6 +用のJavaScriptパーサーやコンプレッサーなどを行えるツールキットです。

webpack の mode を production にすることで terser (uglifyJs) で圧縮を行います。uglifyjs は es6 に対応していない為、es6 記法があると、圧縮時に警告が出てしまいます。uglifyJs は継続されなくなっており、フォークされ terser として引き継いで開発されているようですので、こちらを使用します。

インストール

設定

terser の設定では、ソースマップを出力するようにします。また、ビルド速度を向上させるためにparallel も設定して、マルチプロセス並列実行を使用します。

sourcemap を出力する際は cssProcessorOptions も設定することがキモとなります。

まとめ

css ファイルを単独の css ファイルにするため、MiniCssExtractPlugin で css を含む Javascript ファイルから css を抽出し、別ファイルに出力するようにしています。

webpack4 では独自に css を minify することができませんので、プラグインを使用して minify をする必要があります。

参考

公式 : webpack

github : terserplugin

github : style-loader

github : css-loader

github : sass-loader

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA