rxon's miniminimal tech blog

webpack.config.jsに関する知見、5選

休日を粉砕して手に入れた知見です

祝日の前日の29時までと当日の27時までの時間を使ってrxon/rxon.github.ioのタスクランナーをgulpからwebpack + npm run-scriptに書き換える作業を行い、そこそこの知見が得られたので書く。

extract-text-webpack-plugin

webpackではモジュールとして読み込んだCSSを<head>にをあとからjsで流し込むという方式を取っているが、performanceの面であんまりよろしくない気がしたので外部ファイル化する webpack/extract-text-webpack-pluginを使用した。

module: {
  loaders: [{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: ExtractText.extract('style-loader', 'css-loader!postcss-loader')
  }]
}

というように書けば動くのだが、何も考えずloaderにchain loadersをつかってstyle-loader!css-loader!postcss-loaderとか指定するとReferenceError: window is not defindと吐き出され睡眠時間が削れて 「ステラのまほう」第8話「デバッグなめたらダメだよ?」 ってかんじになる。

devtool: 'eval'

source-map作るための設定。evalって値を使うとbabel後みたいなコードが出てくるが、performanceが+++になる。 See also:webpack configuration

PostCSS

もともと業界最小記述量のstylusの中でPostCSSを使い、トランパイルしてからトランスパイルしていた。前からPostCSS内でstylusみたいな立ち位置にあるSugarSSの採用を考えていたが最近生CSSが書きたくなってきたので、今回はsyntax系のプラグインは使っていない。

プラグインの読み込みのとき、postcss-loaderのREADMEにはpostcss.config.jsを使えと書いてあるが普通にwebpack.config.jsに下記のようなコードを書いたほうがいい。

postcss: [
  require('postcss-import'),
  require('postcss-custom-properties'),
  require('postcss-custom-media'),
  autoprefixer({
    browsers: ['last 2 versions']
  }),
  require('cssnano')
]

PostCSSのデバッグがなかなか曲者で、どれも静かに失敗する。原因は処理の順番で、上のようにファイル操作 → 変数処理 → prefix → 圧縮という順番にする。ファイル操作が一番初めというのがミソ。

postcss-importに関しては、sebastian-software/postcss-smart-importというのも良さそうだったけどとりあえず間に合ってたので保留。

タスクの分離

ただでさえcomplicatedなのでCSSとJSのトランスパイルをwebpackで、そのほかはnpm run-scriptでというように分離した。こんな感じ。

"scripts": {
  "start": "cp src/index.html public/index.html && webpack-dev-server --open --inline --hot --content-base public/",
  "build": "webpack -p && critical src/index.html --inline --minify --base public/ > public/index.html",
  "deploy": "npm run build && gh-pages -d public/ --branch master",
  "test": "stylelint src/css/*.css && xo src/js/*.js"
}

良いかんじ。

そのほか色々

Share on Twitter