技術探し

JavaScriptを中心に記事を書いていきます :;(∩´﹏`∩);:

トップ > webpack > 簡単なアプリケーションでwebpackとbabelの設定をしなくて済むライブラリを作った

簡単なアプリケーションでwebpackとbabelの設定をしなくて済むライブラリを作った

webpack babel library

github.com

最初に

ターゲット

簡単なwebアプリケーション

モチベーション

同じ設定ファイルを書くことが多いのでそれを避けたい

ゴール

babelの設定とwebpackの設定を書かなくてもある程度のことはできるようになる。
ただ、複雑なアプリケーションだとwebpackは無限大なのでそこまでサポートする気はない。
webサイトとかを作るときに、プロダクションや開発の設定(minify, hashed name, server, etc…)を書くのがめんどくさいのでそれを解決する。

sweetpack

できること

webpackとbabelの設定ファイルを書かずにできることは主に以下の通りです。

  • reactを使用できる
  • flowを使用できる
  • css-modulesを使用できる
  • postcssを使用できる
  • htmlテンプレートエンジンが使える
  • 各環境の.envを読み込める
  • 開発時にwebpack-dev-serverが立ち上がり、HMRも有効化される
  • 開発時にreact-hot-loaderが使える
  • ビルド時にファイル名のハッシュを付く
  • ビルド時にコードの最適化が行われる(js, react)
  • ビルド時にファイルの分割ができる

プラグイン・設定

設定ファイル

.sweetpack.ymlで設定します。
以下の設定をサポートします。(値はデフォルト値)

entry: src/index.js
output: dist
js:
 flow: false
  react: false
css:
  modules: false
  postcss: false
html:
  filename: null
  template: null
dev:
  port: 8080
  dashboard: true
prod:
  extract: false

設定ファイルがない場合は、上記が適応されます。

共通プラグイン

  • html-webpack-plugin
    • 基本的にhtmlは自動生成(or テンプレートを指定)
  • dotenv-webpack
    • .envを読み込む
  • case-sensitive-paths-webpack-plugin
    • モジュールのファイル名の大文字、小文字を判断しエラーを出します(osxの標準ファイルシステムのHFS+は判断しないため)
  • file-loader
  • style-loader
  • css-loader
    • css-modulesにも対応(default: false)
  • postcss-loader(default: false)
    • これはローダを挟むだけなので、postcss.config.jsで自分の使いたいプラグイン(e.g. sass, cssnext, precss, etc..)を指定する
  • babel-preset-react(default: false)
    • onの時、react-hot-loaderも使用可能になる(devのみ)
  • babel-preset-flow(default: false)
    • onの時、flow-status-webpack-pluginも使用される
  • babel-preset-env
  • babel-preset-stage-1

開発時プラグイン

webpack-dev-serverが起動し、HMRもオンになります。
webpack-dashboardもデフォルトで使用されます。
また、reactを使用している場合はreact-hot-loader@nextも自動で入ります。

有効化されるプラグイン

  • webpack-dev-server
  • react-hot-loader(reactオプションがtrueの時のみ)
  • webpack-dashboard

github.com github.com

ビルド時プラグイン

NODE_ENV=productionを基本的には使用する前提で書かれています。
また、ビルド時にはindex.html以外のファイル名が自動でハッシュが付与されます。
このときに、reactが有効化されていてもreact-hot-loaderは無効化されます。
clean-webpack-pluginにより出力ディレクトリが削除されます。
最適化としてbabel-minify-webpack-plugin, OccurrenceOrderPlugin, AggressiveMergingPluginが走ります。
もしこのときにextract-text-webpack-pluginを有効化していれば、styles.[hash].cssという形でindex.htmlに挿入されます。

有効化されるプラグイン

  • clean-webpack-plugin
  • babel-minify-webpack-plugin
  • babel-preset-react-optimize(reactオプションがtrueの時のみ)
  • extract-text-webpack-plugin(extractオプションがtrueの時のみ)
  • webpack.optimize.OccurrenceOrderPlugin
  • webpack.optimize.AggressiveMergingPlugin

github.com github.com github.com

サンプル

package.json

{
  "scripts": {
    "start": "sweetpack watch",
    "build": "cross-env NODE_ENV=production sweetpack build"
  }
}

.sweetpack.yml

entry: ./lib/index.js
output: dist/bundle.js

ディレクトリ構成

 .
├── lib
│   └── index.js
└── package.json
1 directory, 2 files

npm startをしたらwebpack-dev-severとwebpack-dashboardが起動します。
そして、npm run buildをしたら、/distにビルド済みの生成ファイルができます。

dist
├── bundle.2ea3ca43d449dd5fdc16.js
└── index.html
0 directories, 2 files

html, jsはファイル名にハッシュ値が振られ、最適化済みになります。

すべての設定ファイルを有効化したサンプルはこちらです。
sweetpack/samples/all at master · abouthiroppy/sweetpack · GitHub

さいごに

詳しくはREADME.mdとサンプルを見るとわかると思います。

まだまだやるべきことはあると思いますが、一旦ここである程度サポートできたのではないかなと思い書きました。
もちろんまだ足りないプロパティはあると思います。。。

もし興味あれば、是非使ってみてください;)