Autoprefixerでベンダープレフィックスを自動付与させる

今回はAngular2とwebpackを利用した開発環境にPostCSSを導入し、Autoprefixerでベンダープレフィックスを自動生成させます。Angular2、webpack、PostCSSと初物尽くしであるので仕方がないのですが、だいぶハマりました。

まず、PostCSSとはなんぞや？ という方はこちら（PostCSSとは何か）を確認してください。PostCSS自体は参照先に書いてある通りCSSを変換するツールで、実際の利用はプラグイン（precssやautoprefixerなど）で機能を追加して利用します。

とりあえず必要なものをインストール。

npm install --save-dev style-loader css-loader postcss-loader autoprefixer

インストールが完了したら、PostCSS用の設定ファイル「postcss.config.js」をプロジェクトフォルダ直下に作成します。詳しくはこちら（GitHub - postcss/postcss-loader: PostCSS loader for webpack）を参照してください。

今回、必要になる設定ファイルは以下のようなものになります。

module.exports = {
  plugins: [
    require('autoprefixer')({ })
  ]
}

続いて「webpack.config.js」を次のように設定します（CSS以外の設定については適宜変更してください）。

module.exports = {
  entry: './src/entry.js',
  output: {
    path: './dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              minimize: true
            }
          },
          'postcss-loader'
        ]
      }
    ],
  },
  resolve: {
    extensions: ['.js', '.css']
  }
};

上記の設定を行った後に実行して表示されたページを確認すると、

h1{
  display: flex;
}

というスタイルが記述されたCSSがあったとしたら、出力される「bundle.js」では以下のようなベンダープレフィックスが付与されたものが出力されます。

h1{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

大変、便利です。

隠していたわけではありませんが、実はハマったのはここではありません。このPostCSS、Autoprefixerの利用自体は、結構すぐにできて動作確認もとれたのですが、これをAngular2で実際に利用しようとしたところでハマりました。

それに関しては長くなりそうだったので記事を別にします。こちら（Angular2とwebpack環境で外出しにしたCSSファイルを読み込む方法）。

• cssnextから学ぶ次世代CSS - Qiita