Browserify x UglifyifyからWebpackへの移行

2016/06/15 20:37:10

あっさりできたけど、一部つまるところもあったので一応メモっておく。

タイトル以上のことは求めてなくて、いわゆる最小構成からはじめたい場合にもどうぞ。

なんで

エントリーポイントが1つから2つになってしまったから。

BrowserifyはINとOUTの指定が対になってて、1組しか指定できないので、複数のエントリーポイントに対応するには複数回コマンドを叩く必要がある。
npm scriptsでやってる場合に、`npm run build`的なのを複数やらなあかんのはなんだかなーということで。

RequireJS時代からいいなとは思ってたけど、Webpackならそれが自然に書けるのです！

webpack.config.js

var webpack = require('webpack');
var IS_PROD = process.env.NODE_ENV === 'production';

module.exports = {
  entry: {
    foo: './src/foo/main.js',
    bar: './src/bar/main.js'
  },
  output: {
    path: './public',
    filename: 'bundle.[name].js'
  },
  plugins: IS_PROD ? [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        drop_console: true,
        unsafe: true,
        hoist_vars: true,
        collapse_vars: true,
        pure_getters: true
      }
    })
  ] : []
};

コマンドとしては、

開発中は`webpack -w`
本番用は`webpack -p`

`-p`すると勝手にUglifyもやってくれるし、`-w`の機能も一緒に入ってるので、`npm i`するのはWebpackだけというお手軽さ。

`-p`してるしてないでプラグインを変えたい

上の例みたく、`NODE_ENV`的な指定を拾うしかないっぽい？

実行するときは、`NODE_ENV=production webpack -p`ってしてる。
ちなみに`-p`だけでもUglifyはしてくれるけど、細かい指定がしたいならpluginsでやる必要がある。

ちなみに

同じUglifyの指定をしてても、Webpackでやってる方がファイルサイズがちょっと小さくなる。
CommonJSのロード処理まわりがBrowserifyとは違うんやろうなーと。