ローダー(webpack)メモ
CSSや画像をJSに変換したり、ES6のコードをES5に変換するなどの役割を持つものをローダーという。ESLintを実行するものなど変換を伴わないものもローダーに含まれる。
Babel
yarn add --dev babel-loader @babel/preset-env @babel/core
babel-loader
ES6をES5に変換したり、TypeScriptをJSに変換するBabelを実行するローダー。
@babel/preset-env
指定したブラウザやNodeのバージョンで実行できるJSに変換するプリセット。プリセットはプラグインのコレクションを意味するっぽい。
Sass
yarn add --dev sass sass-loader css-loader style-loader
// webpack.config.js の rules 設定
{
test: /\.scss$/,
include: path.resolve(__dirname, 'src/scss'),
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
エントリポイントのjsからscssファイルをimportする。
sass-loader
SassをCSSにコンパイルするローダー。
css-loader
CSSをJSのモジュールにするローダー。
style-loader
バンドルされたCSSをHTMLのstyleタグとして適用するローダー。
PostCSS
PostCSSはCSSを処理するためのフレームワークみたいなもの。PostCSSを利用して、CSSのlinterやベンダープレフィックスを処理するAutoprefixerなどが作られている。
Autoprefixer
必要なベンダープレフィックスを付与してくれるPostCSSのプラグイン。
yarn add --dev postcss-loader postcss autoprefixer