PostCSSをが使えるwebpackでつくったときのメモ

PostCSSで遊ぶためにミニマムな環境作った時メモ

• https://github.com/eiel/start-PostCSS-in-WebPack/tree/v0.0.2

$ yarn
$ yarn serve

で作業環境が立ち上がる。

cssどうなってるかみたい場合は、思ったら開発者ツールのSourceでみる。
yarn buildするとdistディレクトリにindex.html、bundle.js、 styles.cssができるので、そこをみてもよい。

使ったもの

• webpack
• webpack-dev-server
  • プレビューするのにつかう
• html-webpack-plugin
  • html生成するのに使う
• style-loader
  • 読み込んだCSSをDOM適用したり、styleタグで挿入してくれるみたい。入ってるけど、ExtractTextPluginで切り出してるのでいらないっぽい。
• postcss-loader
  • cssファイルを呼んで AST に変換して、設定されているプラグインを適用してCSSにするっぽい。(ちゃんとみてない
• css-loader
  • CSSを読み込みする
• extract-text-webpack-plugin
  • CSSを別ファイルに分離するのに使う

やったこと

• 必要なnode_modulesのインストール
• postcss.config.jsの作成
• webpack.config.jsの作成
• postcssに処理をかけるCSSの用意 (app/css/index.css)
• cssをloaderする javascriptを用意 (app/index.js)

追伸

リポジトリ名をにWebPackってしてしまったがwebpackが正しいです。