webpack2の入門をやってみました

WEB+DB PRESS Vol.99

入門webpack2があったので、やってみました。

ただインストールしたのは3.8.1になったので、webpack3なんでしょうか？最近出たものなのかな。

webpack.github.io

webpackとは

最近フロントエンドを調べるとよく見ます。モジュールハンドラと言われるツールだそうです。

javascript でimportをしているソースを見ると、多分モジュールハンドラと言われているやつが使われているんだと思います。

イメージとしては、複数ファイルをコンパイルして一つのファイルにまとめて出力してくれて、WEBのフロントエンドでmodule単位で便利になるよ！！ぐらいな印象です。

ただ最近のフロントエンドで楽をしようとすると、必須なものになっている気がします。

最近個人的に対応しようとしているものだと、Vue.jsやckeditorとかでビルドとかが書かれていおり、webpackを利用しているように見えます。

どうやらbrowserifyなどと同じようなものらしいが、webpackのほうが開発が活発とのことで主流になっているみたいです。

npmのインストール

nodebrewでv6系のバイナリをインストールしました。

バージョンを色々と試せるので、nodebrewでインストールしておくのがいいと思います。

webpack2

npm install --save-dev webpack

npmでインストールしてきます。どうやら開発環境用だけで問題ないらしい。

そして重要なのはconfigファイルがかなり重要なものだと思われます。このconfigファイルの書き方さえ覚えれば、あとはいつもどおりのコードの製造な気がします。（得意分野なはず！！）

「webpack.config.js」ファイルがデフォルトのconfigファイルとして、webpackのビルド時に使用されるみたいです。

npmでwebpackがインストールできたら、buildの実行の仕方は

./node_modules/.bin/webpack

で可能です。

webpack.config.js

modules.exports = {
    entry : './app.js',
    output: {
        filename: 'app.bundle.js'
    }
};

app.jsが必要になりますがとりあえず簡単なイメージを持ってみようと思います。

entryに実装したプログラム、outputに出力ファイルです。

このあたりなら理解はし易いです。あとはapp.jsでクラスが利用できるjavascriptを書けば、WEB側ではapp.bundle.jsを読み込むだけで行けそうです。

あとはmoduleを理解したらいける気がします。

とりあえず動かすところまで行けたら、また書いてみます

いまのところとにかく色々と書いてみている状態なので、概要と使い方さえ理解できればいいと思っています。

書くだけなら1時間ぐらいだったけど、理解しながらやったら1日ぐらいかかってる。。。

ckeditorを利用するあたりまで持っていく予定なので、またいろいろと理解できたら書いていきます。

ckeditor5の記事、あまりないなぁー。

webpackとか理解してplugin周りも導入したら色々と書こうかな。