※ 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を理解するにはやはり向いている。