webpack 2 系を使ってページを作成する

先日の webpack 1 系の操作をふまえ、今回は 2 系を扱って簡単なページを作成してみようと思う。

webpack（2 系）

https://webpack.js.org/

---

今回もいつものように公式ドキュメントに従って作業する。

まずは先に、完成したものはこちら。

それでは早速作業内容へ。作業の流れは次の通り。

ドキュメントの内容に加えて何か使ってみたいなと思い、Sass を使う場合どんな感じになるか見てみることにした。

---

1. 公式ドキュメントに沿って基本的なプロジェクト作成

概ね公式ドキュメントをなめた感じだが、次の２点については意図的に作業した。

＜１＞

webpack インストール時、下記コマンドで利用可能な最新バージョンタグを調べて「2.1.0-beta.27」を入れた。

$ npm view webpack dist-tags

{ latest: '1.13.3', beta: '2.1.0-beta.27' }

$ npm install webpack@2.1.0-beta.27 --save-dev

＜２＞

ビルド時に config ファイルを参照することを明確にしておきたくて、package.json の scripts に次のコマンドを加筆した。

"build": "webpack --config webpack.config.js"

これでビルド実行時、「$ npm run build」と打てば上記コマンドが叩かれる。

＜その他＞

手順の冒頭で「Lodash」がさらりとインストールされていることが気になった。

これについてよく知らなかったので調べてみたところ、Underscore とすごくよく似ているなあという印象を持った。

ただ、Underscore との差異がまだよく分かっていないので何とも言えない。

---

2. Sass の導入

css まわりは次のような Loader をインストールし、各ドキュメントに従って webpack.config.js を作成した。

---

3. ビルド

下記コマンドで実行、ビルド完了。

$ npm run build

途中、下記リンクと同様のミスに自分もハマってしまった。

慣れるまではまた似たようなこと起こしそうだ・・・。

---

まだまだやりたいことがたくさんあるけれど、一旦今回は以上。今後、2 系がどんなふうに落ち着いていくか楽しみながら触っていきたいなと思う。

ちなみに、最初は gulp も入れようとかアレコレ妄想していたけど、触っていくうちにだんだんほだされてしまって「webpack だけでよくない？」と思い始めている。

あんなに gulp 好きやったんに・・・:;(∩´﹏`∩);:

鯛めしのお釜