トップ > webpack > 【webpack 4】コード圧縮処理の設定方法

【webpack 4】コード圧縮処理の設定方法

webpack js

webpackの利点として、コンパイルしたスクリプトの容量を抑えてくれる機能が用意されています。
とはいえ、単純にwebpackを使うだけであれば触れる機会は少ない機能だと思います。

今回は、コードの圧縮方法について触れたいと思います。

webpackのライブラリが保持している圧縮方法

webpack 4ではライブラリを使わなくても圧縮処理をしてくれます。

Tell webpack to minimize the bundle using the TerserPlugin or the plugin(s) specified in optimization.minimizer.
This is true by default in production mode.

Optimization | webpack より引用

webpack.js.org

圧縮する場合は、optimizationのminimizeを有効にします。

// webpack.config.js
module.exports = {
  //...
  optimization: {
    minimize: true
  }
};

本番環境のみ設定したい場合

webpackにはmodeという、環境を振り分けるパラメーターが用意されています。

webpack.js.org

環境がproductionであれば設定無しに圧縮されますので、webpackを起動する時に次のコマンドで生成すれば特に設定する事なく圧縮します。
例えば、webpackのコマンドを実行する時に、--modeを設定する事で有効に出来ます。

$ webpack --mode=production

圧縮処理に独自設定をしたい場合

webpackが独自に設定している圧縮方法なので、案件によっては設定したい内容と異なる場合があります。
その場合は、uglifyjs-webpack-pluginプラグインを使用して、設定を変える事が出来ます。

webpack.js.org

次のように、optimizationのminimizerにuglifyjs-webpack-pluginのインスタンスを適用します。
次の例はソースマップを有効にする設定です。

// webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
      })
    ],
  },
};

本番環境のみ設定したい場合

modeを切り替えるだけでは設定できません。
そのため、modeで判別してproduction用の処理を追加します。

// webpack.config.js

if (process.env.NODE_ENV === 'production') {
  module.exports.optimization.minimizer =
    (module.exports.optimization.minimizer || []).concat([
      new UglifyJsPlugin({
        sourceMap: true,
      }),
    ]);
}

Tips

webpack 3以前の圧縮方法について

最近ではあまり見かけませんが、webpackのバージョン3以前では次のような書き方で設定している記事があります。

// webpack.config.js

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map';
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false,
      },
    }),
}

以前は、uglify.jsというプラグインを使用して圧縮する設定をしていました。

www.npmjs.com

しかし、webpackのバージョン4で同じ設定をすると次のようなエラーになってしまいます。

RemovedPluginError: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

エラー内容を読む限り、前項で取り上げたoptimization.minimizeに変わったという事です。
何故使えなくなったかについて明言されている文章は見つかりませんでしたが、webpackに関する記事の中で次のような記載があります。
既にuglify.jsで圧縮しているので不要という事なのかもしれません。

Use the minimizer (optimization.minimizer, by default uglify-js) to minimize output assets.

webpack 4: mode and optimization. webpack adds a mode option. What does… | Medium より引用

medium.com

©︎2017-2018 WebSandBag