Rails+webpacker3.xのproduction用設定でuglifyしたい時のconfig

TL;DR

webpacker3.x系でバリバリwebpacker wayに乗っかるとこんな感じになるの例。

sourceMapもついでにオフっておくと良い。

# config/webpack/environments.js
const { environment } = require('@rails/webpacker')
module.exports = environment

# config / webpack / production.js
const webpack = require('webpack');
const environment = require('./environment')
environment.plugins.append("UglifyJs", new webpack.optimize.UglifyJsPlugin({
    parallel: true,
    sourceMap: false,
    mangle: false,
    uglifyOptions: {
        mangle: false
    },
    compress: {
        warnings: false
    },
    output: {
        comments: false
    }
}))
const config = environment.toWebpackConfig()
module.exports = config

1. @rails/webpackerにpluginとしてUglifyJs入れる
2. UglifyJsはsourceMap付けるとビルド遅くなるのでfalseにする
3. @rails/webpackerを使わずに自前で設定してもいいけど面倒くさい人向け

結果 

before

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};

after

!function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;