Housekeeping the Webpacker /packs folder
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~
Clap to support the author, help others find it, and make your opinion count.