公式のドキュメントを参考にwebpackをTypescriptに対応させたいと思います。 まず以下のコマンドでtypescriptとts-loaderをインストールします。 npm install --save-dev typescript ts-loader

shimming 公式のドキュメントでShimmingを試してみたいと思います。 webpackの設定ファイルでProvidePluginを指定するとライブラリをグローバルに適用することができ、importなしでも使用することができます。例えばサードパーティ製のライブラリがjQueryを…

Progressive Web Application webpackの公式ドキュメントのProgressive Web Applicationを見ていきたいと思います。 まずPWA(Progressive Web Application)ですが、これはWEBアプリをネイティブアプリのように動作させる技術のようで以下のドキュメントを見…

Authoring Libraries 公式ドキュメントのAuthoring Libraries を参考にnodeのモジュールを作成して参照できるようにしたいと思います。 それではまず、モジュール化させるプロジェクトを作成します。 mkdir webpack-numbers cd webpack-numbers npm init -y …

前回はwebpack-devserverで開発ができるようになりました、今回はwebpack-devserverでの開発中にhot-module-replacementでファイルの修正を検出してhot reloadできるようにしたいと思います。 webpack.config.jsには以下の修正を加えます。 - devServerにhot…

前回はbiuldしてhtmlファイルを出力できるようになりました。今回は開発用サーバを使って毎回ビルドしないでも修正内容を確認できるようにしたいと思います。 公式のドキュメントでは開発用にwebpackをwatchモードで起動したり、webpack-dev-server,webpack-…

前回に引き続き、今回はbuildでhtmlを出力できるようにしたいと思います。使用するライブラリはhtml-webpack-pluginでbuildの時に必要になるものなので以下のコマンドを実行します。 npm install --save-dev html-webpack-plugin それからwebpack.config.js…

前回に引き続き今回はassetファイルを扱いたいと思います。 cssファイルの読み込み 以下のコマンドでcssファイルを読み込めるようにします。 npm install --save-dev style-loader css-loader 以前は--save-devではなく--saveを利用しましたが、--save-devは…

このところのjavascriptは発展が著しくECMAscript6が出たりAngularやReact,vueといったフレームワークが登場しています。新規の開発であればこれらの導入を検討しても良さそうですがビルドツールなどの環境整備の情報がまとまっていなかったりしてその分敷居…