webpackでsassをコンパイルする方法を記事にした時に、cssをバンドルせずにcssファイルとして出力する方法も記事に含めたかったのですが、予定よりも記事の容量が大きくなったためﾍﾞ別記事にわけることにしました。
css-loader、style-loaderを使うことでバンドルしたjavascriptファイルを読み込めばstyle要素としてcssをhtmlに反映してくれます。しかし、場合によってはcssファイルのまま出力して欲しい時もありますよね。
私はcssの記述量が少なければstyle-loaderを使ってhtmlに反映でもいいのですが、cssの記述量が多い時は別ファイルで管理したいです。
webpackのプラグインを使ってcssをcssファイルとして出力する
webpackでcssをバンドルせずにcssファイルとして出力するにはwebpackのプラグインmini-css-extract-pluginを使用します。
mini-css-extract-pluginはwebpack4系で使用するプラグインで、4系より前のwebpackではextract-text-webpack-pluginを使います。今回もwebpackは4系を使うのでmini-css-extract-pluginを使います。
extract-text-webpack-pluginのリポジトリを見ると、webpack4以降ではextract-text-webpack-pluginを使うべきではない、mini-css-extract-pluginを使ってくださいと書かれています。
必要なパッケージをインストールする
webpackでビルドするために必要なパッケージをインストールします。今回は省略してsassではなくcssをcssファイルにします。sassをコンパイルする場合は下記にnode-sass、sass-loaderを追加するだけです。
yarn init
yarn add webpack webpack-cli css-loader html-webpack-plugin mini-css-extract-plugin -D
html-webpack-pluginはhtmlを自動的に生成してくれるwebpackのプラグインです。便利なので私はいつも利用しています。無くても問題はありません。
webpackでビルドするファイルを用意する
エントリーポイントのなるファイルとcssのファイルを用意します。cssはエントリーポイントに読み込んでおくことをお忘れなく。
// src/index.js
import './css/style.css';ディレクトリ構成は下記のようになってます。
/workspace /src - index.js /css - style.css
webpackの設定ファイルを作成する
毎度おなじみwebpackの設定ファイルwebpack.config.jsを作業ディレクトリ直下に作成します。エントリーポイントも毎回同じsrc/index.jsとします。
ポイントとしてはcss-loaderの後でcを使用しているところと、pluginsプロパティでMiniCssExtractPluginを設定しているところです。
style-loaderを使わずにMiniCssExtractPlugin.loaderを使用してcssファイルとして出力しています。pluginsプロパティはではMiniCssExtractPluginを使うために配列にMiniCssExtractPluginのインスタンスを設定してます。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/public'
},
module: {
rules: [
{
test: /\.css/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'style.css'
})
]
};webpackコマンドでビルドする
設定ファイルを作成したらwepackコマンドでビルドします。webpackのoutputオプションに設定したディレクトリにcssファイルが出力されます。pluginsでインスタンス作成する時にオプションを渡すことでファイル名を設定することができます。
MiniCssExtractPluginのオプションに関してわからない点が多い
MiniCssExtractPluginを使ってcssファイルとして出力する方法は理解できたのですが、MiniCssExtractPlugin.loaderのオプションが理解できていません。
リポジトリのreadmeにある例を見るとloaderのオプションでpablicPathを設定できるとあるので試してみましたが何も起こりませんでした。出力するパスを細かく設定する方法もわかっていないので、今後も色々と試していこうと思います。
webpackを学習するときのおすすめ書籍の紹介
webpackを学習するにあたり、速習webpackを読んだところ、安価なうえにわかりやすくまとめられていたのでおすすめしておきます。ケースごとにwebpackの環境構築についてが具体的にかかれているので、入門者や、なんとなくwebpackを使っているけどいまいち理解できないところがある方には特におすすめしたいです。
