必要な機能項目を選択することでwebpack.config.jsを出力してくれるジェネレータ「Webpack configurator」

必要な機能項目を選択することでwebpack.config.jsを出力してくれるジェネレータ「Webpack configurator」

「Webpack configurator」は、その名の通りwebpackに関する設定を記述するwebpack.config.jsを各項目を選択するだけで出力してくれるジェネレータです。
React, CSS, Sass, SVG, lodashなど、現状で10個の項目が用意されています。

Webpack configurator

サイトにアクセスするとページ上部に各項目のチェックボックスが並べられているので、そこから必要な機能を選択していきます。
各項目を選択するとその下の「Your personal webpack.config.js」にあるコード内容が変化していくので、あとはこの記述をコピーしてwebpack.config.jsにペーストするだけです。

選択できる機能としては、現時点で下記の10個が用意されています。

  • React
  • CSS
  • sass
  • less
  • stylus
  • SVG
  • PNG
  • moment
  • lodash
  • Production mode

また、コード出力箇所の横には各パッケージのインストールに必要なnpmのコマンドも出力されます。
何も選択していない場合はnpm install --save-dev webpackが表示されていますが、例えば「React」と「sass」を選択した場合は、下記のようにこれらのインストールコマンドも出力してくれます。
(「React」選択時は.babelrcに記述するコードも出力してくれます。)

npm install --save-dev webpack style-loader css-loader sass-loader node-sass react react-dom babel-loader babel-preset-react babel-core babel-preset-env

実際にどうなるかはまだわかりませんが、今後も選択できる項目を追加する予定みたいですしオープンソースでPRも歓迎してるみたいなので、もっと便利なジェネレータにしたいという方がいればコンタクトを取ってみてください :)

Close the search window,
please press close button or esc key.