webpack

webpack@4の splitChunks を使って CommonsChunkPlugin から移行する

この記事では、webpackのv4で追加されたsplitChunksを使って、v4で削除されたCommonsChunkPluginから移行する方法を書いていく。 使っているパッケージのバージョンは以下の通り。 webpack@4.1.0 webpack-cli@2.0.10 CommonsChunkPlugin とは CommonsChunkPl…

webpack@4のmodeとminimize(UglifyJS)

webpackではv4から、modeというオプションが追加された。 それに伴いminimize(コードの圧縮)の設定の仕組みも変わったので、それについても書いていく。 以下のライブラリのバージョンで動作確認している。 webpack@4.1.0 webpack-cli@2.0.10 uglifyjs-web…

webpackでCSSやSASSを使う

webpackでは、JSファイルだけでなくCSSやSASSもバンドルの対象にできる。 このエントリではその方法を書いていく。 webpackのバージョンは以下。 webpack@4.0.1 webpack-cli@2.0.9 下準備 webpackをインストール。 $ npm i -D webpack webpack-cli npm scrip…

ReactにFlowを導入して型チェックを行う

JavaScriptは動的型付け言語なので、型のチェックは行われない。 だが、大規模な開発や複数人による開発のときは、型が欲しいこともある。 JavaScriptで型システムを導入する方法はいくつかあるが、その一つがFlow。 同じく型システムを実現するものとしてTy…

webpack-dev-serverで開発用サーバを立てる

webpackでは、開発用サーバを簡単に立てることが出来る。 前回の記事でwebpack2の導入に成功したので、今度はそこにwebpack-dev-serverを導入してみる。 前回の記事の最後で、Reactをビルドできる状態になった。 その時はhtmlファイルを直接開いていたが、ロ…

webpack2の初歩

今まで、複数のファイルのバンドルにはbrowserifyを使っていた。 特に不満はなかったのだが、webpackに乗り換えていくことにした。 ネット上の記事を見てもwebpackを使っているケースは多いし、webpack-dev-serverという開発用サーバーも簡単に立てられるら…