フリーランスのエンジニア道

フリーランスエンジニアの不安を解消するブログ

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;