webpack #004 – gulpとBrowsersyncと連携

By | 2017年8月28日

 

node.js_016_02

node.js_023_01

 

今回は、webpackgulpBrowsersyncを連携した環境を構築してみます。

 

まず、gulpでwebpackを読み込むために、「webpack-stream」をインストールします。
その他にもお好みで、「Node.js #023 – gulpとBrowsersyncでブラウザ同期」や必要なモジュールをインストールしておきます。

 

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

 

それぞれのコードを記述します。

 

webpack.config.js

 

gulpfile.js

 

package.json

 

main.js

 

index.html

 

stylesheet.css

 

sample01.js

 

sample02.js

 

gulpを実行します。編集後保存すると、圧縮されたHTML・CSSとコンパイルされたJSがそれぞれ生成されます。

 

gulpfile.js
gulpでwebpackを読み込む:

 

gulpfile.js
gulpでコンパイル処理:

 

webpackとgulpとBrowsersyncを利用した開発環境を構築してみました。