[webpack] webpack 2 入門: postcss-loader で PostCSS plugin を利用する

autoprefixer と cssnano を追加します。

[markdown]
ここでは PostCSS そのものについては触れず、postcss-loader の組み込みについてフォーカスします。

## Installation

postcss-loader をインストールします。

> * [postcss/postcss-loader: PostCSS loader for webpack](https://github.com/postcss/postcss-loader)
> * [postcss-loader](https://webpack.js.org/loaders/postcss-loader/)

“`prettyprinted
% yarn add –dev postcss-loader
“`

PostCSS のプラグインをインストールします。

> * [postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use](https://github.com/postcss/autoprefixer)
> * [ben-eb/cssnano: A modular minifier, built on top of the PostCSS ecosystem.](https://github.com/ben-eb/cssnano)

“`prettyprinted
% yarn add –dev autoprefixer cssnano
“`

## webpack.config.js

`postcss-loader` を追加します。
`css-loader` の前で読み込みます。

“`javascript:webpack.config.js
module.exports = {
:
module: {
rules: [
{
test: /\.(css|scss)$/,
use: ExtractTextPlugin.extract({
fallback: ‘style-loader’,
use: [
{
loader: ‘css-loader’,
options: {sourceMap: true},
},
{
loader: ‘postcss-loader’,
options: {sourceMap: true},
},
{
loader: ‘sass-loader’,
options: {sourceMap: true},
},
],
}),
},
:
“`

## Usage

[Browserslist](https://github.com/ai/browserslist) の設定を `package.json` に追加します。

“`json:package.json
:
“browserslist”: [
“> 1%”,
“last 2 versions”,
“ie >= 9”
],
:
“`

`webpack` コマンドを実行します。

“`prettyprinted
% $(yarn bin)/webpack
“`

Chrome Devtool や生成されたファイルを見ると、ベンダープレフィックスが自動で追加されていることが確認できました。

“`css:dist/stylesheets/style.css
.slick-next,.slick-prev {
-webkit-transition-duration: 1s;
transition-duration: 1s
}
.slick-next:hover,.slick-prev:hover {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg)
}
“`

> * [Add: postcss-loader · DriftwoodJP/sandbox-webpack@32521af](https://github.com/DriftwoodJP/sandbox-webpack/commit/32521af487f68c5ed703d68cfe7bc2aa2d5c4ddc)

## 補遺

PostCSS について。

> * [postcss/postcss: Transforming styles with JS plugins](https://github.com/postcss/postcss)
> * [PostCSS まとめ – Qiita](http://qiita.com/morishitter/items/4a04eb144abf49f41d7d)
> * [PostCSSとcssnextで最新CSS仕様を先取り！ | HTML5Experts.jp](https://html5experts.jp/t32k/17235/)
> * [初心者歓迎！ 話題のPostCSSの導入方法からおすすめプラグインまで – WPJ](https://www.webprofessional.jp/7-postcss-plugins-to-ease-you-into-postcss/)

Browserslist について。

> * [ai/browserslist: Share browsers list between different front-end tools, like Autoprefixer, Stylelint and babel-env-preset.](https://github.com/ai/browserslist)
> * [Browserslist is a Good Idea | CSS-Tricks](https://css-tricks.com/browserlist-good-idea/)

css-loader の `importLoaders` オプションについては、いまいち理解できておりません。

> * [postcss/postcss: Transforming styles with JS plugins](https://github.com/postcss/postcss#webpack)
> * [Clarify importLoaders documentation? · Issue #228 · webpack-contrib/css-loader](https://github.com/webpack-contrib/css-loader/issues/228)
[/markdown]