Housekeeping the Webpacker /packs folder

christineoo
A web developer that is fueled by coffee ☕
Sep 4, 2018 220 words
Edit

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

webpack/development.js

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.

webpack/test.js

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~ 👋


Written By

christineoo

A web developer that is fueled by coffee ☕

Enjoyed the post?

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

Comments

To leave a comment, you need to login first 😉