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