Housekeeping the Webpacker /packs folder

christineoo avatar

christineoo

If you're using Webpacker in your Rails app to manage javascript or assets, you might have noticed the public/packs folder is pilling up with compiled files. In development, Webpacker could be configured to compile on demand whenever app/javascript/packs/*.js files changes. So, the compiled files pile up pretty quickly! 😨 Mine was ~1GB

Ideally, public/packs folder should be kept clean before each Webpacker compile. This ensures that your public/packs folder only consist of files that are used and of course save up some disk space on your machine.

webacker:clobber

Webpacker provides webacker:clobber task that helps to removes the webpack compiled output directory. This method is a bit manual as you need to run it in the console and could not be easily added to your development flow.

$ bundle exec rake webpacker:clobber
clean webpack plugin

Another better way would be adding the clean-webpack-plugin to your webpack configuration. This ensures that the packs folder is deleted before a fresh compile.

$ yarn add -D clean-webpack-plugin
const CleanWebpackPlugin = require("clean-webpack-plugin")
const path = require("path")
const environment = require("./environment")

environment.plugins.append(
  "CleanWebpackPlugin",
  new CleanWebpackPlugin(["packs"], {
    root: path.resolve(__dirname, "../../public"),
    verbose: true
  })
)
module.exports = environment.toWebpackConfig()

Similarly, you could also add the same configuration in the test mode to clean the public/packs-test folder.

const CleanWebpackPlugin = require('clean-webpack-plugin')
const path = require('path')
const environment = require('./environment')

environment.plugins.append(
  'CleanWebpackPlugin',
  new CleanWebpackPlugin(['packs-test'], {
    root: path.resolve(__dirname, '../../public'),
    verbose: true
  })
)
module.exports = environment.toWebpackConfig()

After these configurations are set, run rails s make a change in the watched javascript files and see that packs folder only contains the latest compiled files.

That's it, hope you'll find this helpful~ 👋

christineoo avatar
Written By

christineoo

A web developer that is fueled by coffee ☕
Published in JavaScript
Enjoyed the post?

Clap to support the author, help others find it, and make your opinion count.