webpacker.md

Webpacker/Rails

Problem to solve:

Compiled file served by webpacker is larger than the original file. So inorder to debug the problem, needed to figure out the default config by which webpacker is setup in the Rails app.

Webpacker default enviroment

This is the enviroment that is required from @rails/webpacker.

Environment {
  loaders:
   Map {
     'babel' => { test: /\.(js|jsx)?(\.erb)?$/,
     exclude: /node_modules/,
     loader: 'babel-loader',
     options: [Object] },
     'coffee' => { test: /\.coffee(\.erb)?$/, loader: 'coffee-loader' },
     'elm' => { test: /\.elm(\.erb)?$/,
     exclude: [Array],
     loader: 'elm-hot-loader!elm-webpack-loader?cwd=/Users/akshaysasidharan/Projects/sleekr/asgard&pathToMake=/Users/akshaysasidharan/Projects/sleekr/asgard/node_modules/.bin/elm-make&verbose=true&warn=true&debug=true' },
     'erb' => { test: /\.erb$/,
     enforce: 'pre',
     exclude: /node_modules/,
     loader: 'rails-erb-loader',
     options: [Object] },
     'file' => { test: /\.(jpg|jpeg|png|gif|svg|eot|otf|ttf|woff|woff2)$/i,
     use: [Array] },
     'style' => { test: /\.(scss|sass|css)$/i, use: [Array] },
     'typescript' => { test: /\.(ts|tsx)?(\.erb)?$/, loader: 'ts-loader' },
     'vue' => { test: /\.vue(\.erb)?$/,
     loader: 'vue-loader',
     options: [Object] } },
  plugins:
   Map {
     'Environment' => EnvironmentPlugin { keys: [Array], defaultValues: [Object] },
     'ExtractText' => ExtractTextPlugin { filename: '[name]-[contenthash].css', id: 1, options: {} },
     'Manifest' => ManifestPlugin { opts: [Object] } } }

Default Webpack config:

environment.toWebpackConfig()

{ entry:
   { 'admin-panel': '/Users/akshaysasidharan/Projects/sleekr/asgard/app/javascript/packs/admin-panel.js',
     admin: '/Users/akshaysasidharan/Projects/sleekr/asgard/app/javascript/packs/admin.js',
     application: '/Users/akshaysasidharan/Projects/sleekr/asgard/app/javascript/packs/application.js',
     design: '/Users/akshaysasidharan/Projects/sleekr/asgard/app/javascript/packs/design.js' },
  output:
   { filename: '[name]-[chunkhash].js',
     chunkFilename: '[name]-[chunkhash].chunk.js',
     path: '/Users/akshaysasidharan/Projects/sleekr/asgard/public/packs',
     publicPath: '/packs/',
     pathinfo: true },
  module:
   { rules:
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  plugins:
   [ EnvironmentPlugin { keys: [Array], defaultValues: [Object] },
     ExtractTextPlugin { filename: '[name]-[contenthash].css', id: 1, options: {} },
     ManifestPlugin { opts: [Object] } ],
  resolve:
   { extensions:
      [ '.coffee',
        '.erb',
        '.js',
        '.jsx',
        '.ts',
        '.vue',
        '.sass',
        '.scss',
        '.css',
        '.png',
        '.svg',
        '.gif',
        '.jpeg',
        '.jpg' ],
     modules:
      [ '/Users/akshaysasidharan/Projects/sleekr/asgard/app/javascript',
        'node_modules' ] },
  resolveLoader: { modules: [ 'node_modules' ] },
  devtool: 'cheap-eval-source-map',
  devServer:
   { clientLogLevel: 'none',
     compress: true,
     disableHostCheck: true,
     host: 'localhost',
     port: 3035,
     https: false,
     hot: false,
     contentBase: '/Users/akshaysasidharan/Projects/sleekr/asgard/public/packs',
     inline: true,
     useLocalIp: false,
     public: 'localhost:3035',
     publicPath: '/packs/',
     historyApiFallback: true,
     headers: { 'Access-Control-Allow-Origin': '*' },
     overlay: true,
     watchOptions: { ignored: /node_modules/ },
     stats: { errorDetails: true } } }

Webpack config default rules:

{ rules:
   [ { test: /\.(js|jsx)?(\.erb)?$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       options: [Object] },
     { test: /\.coffee(\.erb)?$/, loader: 'coffee-loader' },
     { test: /\.elm(\.erb)?$/,
       exclude: [Array],
       loader: 'elm-hot-loader!elm-webpack-loader?cwd=/Users/akshaysasidharan/Projects/sleekr/asgard&pathToMake=/Users/akshaysasidharan/Projects/sleekr/asgard/node_modules/.bin/elm-make&verbose=true&warn=true&debug=true' },
     { test: /\.erb$/,
       enforce: 'pre',
       exclude: /node_modules/,
       loader: 'rails-erb-loader',
       options: [Object] },
     { test: /\.(jpg|jpeg|png|gif|svg|eot|otf|ttf|woff|woff2)$/i,
       use: [Array] },
     { test: /\.(scss|sass|css)$/i, use: [Array] },
     { test: /\.(ts|tsx)?(\.erb)?$/, loader: 'ts-loader' },
     { test: /\.vue(\.erb)?$/,
       loader: 'vue-loader',
       options: [Object] } ] }

Reducing the size

Needed to change the default option devtools = cheap-eval-source-map in the weback configuration to 'none'.

Inorder to do such customization or add a new loader, this is where you would go: config/webpack/*.js

Added a config/custom.js which overrides the default config and then makes use of uglifyjs-webpack-plugin to further reduce the size.

// Config to override default webpacker configuration.
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  devtool: "none",
  plugins: [new UglifyJsPlugin()]
};

And made changes within config/webpack/development.js

const environment = require("./environment");
const concatenateFiles = require("./concatenate");
const merge = require("webpack-merge");
const customConfig = require("./custom");

concatenateFiles("app/javascript/packs/design.js");

module.exports = merge(environment.toWebpackConfig(), customConfig);

The original filesize was 114kB but when served by webpack was 312kB. By making these changes the size when served by webpack was down to 54.4 kB.