webpack プラグイン : write-file-webpack-plugin の紹介 (webpack-dev-server で静的書き出し)

JavaScript

2017.07.25

どうも fujihara です。暑いですね。
本日は webpack-dev-server を使用しながらビルドした Javascriptファイルを静的に書き出してくれるプラグイン write-file-webpack-plugin をご紹介します。

背景

webpack で Javascript 開発を行う時 --watch オプションを付けて変更後ビルドすると遅いので普段は webpack-dev-server で開発を行っていました。
web-pack-dev-server は静的にファイルを出力しないのですがシステムと絡めた開発時にどうしても静的出力したくなりました。

write-file-webpack-plugin

webpack-dev-server は静的出力に対応していませんので困っていたんですが、書き出してくれるプラグインがありましたので導入しました。ファイル変更後のビルドも早くとても重宝しています。

導入方法

インストール


npm install write-file-webpack-plugin --save-dev

webpack.config


...
const writeFilePluign = require('write-file-webpack-plugin');
...

module.exports = {
  ....
  plugins: [
    ...
    new writeFilePlugin()
  ]
};