Riot.js #011 – webpackでビルド

By | 2017年8月21日

 

riot-js_001_01

 

今回は、Riot.jswebpackでビルドしてみます。

 

まず、riot関係の必要なモジュールをインストールします。

 

今回は、下記のようなディレクトリ構造にします。

 

それぞれのコードを準備します。

 

webpack.config.js

 

index.html

 

sample.tag

 

sample2.tag

 

main.js

 

ビルドすると、コンパイルされたapp.jsが生成されます。

 

index.htmlを実行すると下記のようにブラウザで表示されます。

 

main.js
各タグを読み込み:

 

webpack.config.js
タグを読み込むローダー:

 

webpack.config.js
Riot.jsを認識:

 

webpack.config.js
出力するJSを圧縮:

 

tagファイルをwebpackでビルドすると、app.jsのみを読み込むことによりコンテンツの表示が可能です。