webpack

(2016/11/01〜2016/11/11)
  • JavaScript製フロントエンドファイルバンドラー
  • CSSとかJSとか画像を圧縮してファイルにしてくれる
  • Browserifyとノリは同じだが今はこっちが主流
  • 使い方

  • 設定ファイル(webpack.config.js)を書いて実行するだけ
  • Gulpで使う場合も設定の書き方は同じ
  • この記事通りやっておくとだいたいうまくいく
  • webpackとbabelでES6コードをさくっと書く
  • Tips

  • 複数ファイルをフォルダ構成そのままにバンドルする
  • ブログ書いたhttp://sota1235.hatenablog.com/entry/2016/11/09/131109
  • コマンドには必ず--progress --profileオプションをつけよう
  • 問題があったときに何が起きてるのかちんぷんかんぷん
  • process.envをフロントJSで使う
  • DefinePluginというのを使うと変数を静的に置換できる
  • javascript
  • export default {
  • /** ~~ */
  • plugins: [
  • new webpack.DefinePlugin({
  • 'process.env.NODE_ENV': JSON.stringify('production'),
  • }),
  • ],
  • /** ~~ */
  • }
  • key-valueのvalueの扱いは少し癖があるので注意
  • 公式ドキュメント
  • JavaScript フロントエンド バンドルツール

general(396)