※ webpack3のときの記事です、鮮度については注意してください

記事は解説記事ではなく作業ログです。

next → loader編

webpack使えることは使えるんだけど、そのへんの記事を読んで色んなものとの抱き合わせで覚えていて、webpackそのものを使いこなしているか？と言われたらNoである。

webpack単体に注目してその把握を図る。

という経緯で今回は公式チュートリアルをやった。
やってみた結果、１回もやったことない人はやったほうがいいだろうなと思った。
脳死してやれば５分ぐらいだし、仕組みに思いを馳せながらやっても１時間もかからないだろう。

とりあえずチュートリアルやるか

公式tutorialをみながら作業。
0. nodeの更新 v6.3.0へ

適当に空ディレクトリを作って git init & npm init
- git initはいらなかった

INSTALLING WEBPACK

webpackのインストール
i -gでのインストールを説明しているがあんまりやらないことにしているのでi --save-devでやる。
後で気づいたけど別に--save-devいらなかった

SETUP THE COMPILATION

-gでインストールしてないので ./node_modules/webpack/bin/webpack.js ./entry.js bundle.jsで実行
あとでscriptsにするかも

it works.

SECOND FILE

It works from content.js.

THE FIRST LOADER

ローダを２つ追加してrequire出来る種類を増やす。
npm install css-loader style-loaderしてからwebpack

この時点で1.59kbから11.8kbへ。
bundle.jsの中身を見た感じ、インストールしたローダのロジックが追加されたようだ。
改行コードが混じっててキモい

BINDING LOADERS

.cssに反応して自動的にローダを選択する設定を追加する。
webpack ./entry.js bundle.js --module-bind 'css=style!css'

解説記事見るといきなりwebpack.config.js作ることが多いけど、ちゃんとCLI用のインターフェース作ってあってwebpackは親切だ。

--module-bind '拡張子=ローダ1!ローダ2....'ということか。

寄り道

style!cssをcss!styleにするとどうなる？

エラーになるのはわかりきっていたが、CssSyntaxErrorとのこと。

ERROR in ./style.css
Module build failed: CssSyntaxError: /css-loader!/.../node-modules/style-loader/index.js!/.../style.css:5:1: Unknown word
    at Input.error (/.../node-modules/postcss/lib/input.js:121:22)
    at Parser.unknownWord (/.../node-modules/postcss/lib/parser.js:457:26)
    at Parser.word (/.../node-modules/postcss/lib/parser.js:174:14)
    at Parser.loop (/.../node-modules/postcss/lib/parser.js:60:26)
    at parse (/.../node-modules/postcss/lib/parse.js:25:12)
    at new LazyResult (/.../node-modules/postcss/lib/lazy-result.js:80:24)
    at Processor.process (/.../node-modules/postcss/lib/processor.js:202:12)
    at processCss (/.../node-modules/css-loader/lib/processCss.js:188:11)
    at Object.module.exports (/.../node-modules/css-loader/lib/loader.js:24:2)

cssだけバインドするとコンパイル(?)はできるが、スタイルシートは適用されてなかった。
styleだけをバインドすると Module parse failed: だった。

css-loaderはスタイルシートなファイルをmodule.exports = 'スタイル定義' なモジュールに変換する物と思っておけばしばらく大丈夫そう。(と思ったら、なんらかのオブジェクトになっている模様。)
あとでちゃんと読もう。

css-loaderだけではhtmlに反映されなかったところを見るとstyle-loaderはhtml上に出力する(headタグにstyleタグが生成されてた)ためのloaderであるということか。それってloaderか？

あとstyle!css!style.cssは後ろにバインドされたものから逆順で処理されるのか。
__遊戯王__のチェーン解決と同じだ。

A CONFIG FILE

コマンドラインオプションだるいってことで設定ファイルに。
設定ファイルの項目をみるにentryやmoduleといった概念があることがわかる。
コマンドラインではmodule-bindという項目だったが、設定ファイル上ではmodule/loaderという表現になっている。
多少対称性が無い気がする。そのままbindという項目で良かったような。

まぁ慣れよう。

A PRETTIER OUTPUT / WATCH MODE

うん。便利便利。

DEVELOPMENT SERVER

-g無しでwebpack-dev-serverをインストール。
これは大体どの解説記事でも言及されるデバッグ用のwebサーバ。
ブラウザ側の更新まで自動でやってくれるすぐれもの。使わない理由はない。

まとめ

さすがチュートリアル手順だけが淡々と書いてあって解説は殆ど無かった。
とはいえ混じり気がない分webpackを理解するにはやはり向いている。