How to handle multiple assets js/css with Webpack in Phoenix 1.4

Phoenix 1.4 came out recently, I have a small project based on realtime streaming functionality, it is boring to do it with Rails so I think it is time to give Phoenix a try.

If you start with Phoenix 1.4 you might know that Phoenix comes with app.js and app.css for the whole app. I tried to create two other assets namely frontend.js and admin.js but things did not seem to work until I figured out that its build tool for static assets is totally based on Webpack.

I took me quite some time to solve this so I think it is good to share

Understand assets/webpack.config.js

I encourage you to read a wonderful docs here https://webpack.js.org/concepts. it is a sort read and very well explanation

Webpack supports multiple entries ( input put files ) with a hash of name as a key and value is a file path ( either an array of string or just a string ).

On lines 17, 18, and 19 I created 3 new entries in the same directory as the default app.js file.

Webpack accepts many entries but only one output. To overcome multiple entries to multiple outputs it offers a special params [name] to capture the name of each entry.

On line 22 I specified the

filenname: '[name].js'

Webpack will loop the entry object defined on line 15 and replace the [name] by each entry key:

app.js
frontend.js
admin.js
manage.js

on line 37 (optional ) I also config css loader and sass loader to be able to parse scss file extension to use sass ( I need it for bootstrap integration ). You might need to add other file extensions in the expression if you want to process other types.

The last important line is CSS extraction line 54. Since we use Webpack most of the time we will import css into js file, for example importing app.css into app.js. However, we would like to have it on its own file rather than to have the css bundled with the js file. The MiniCSSExtractionPlugin serves just this.

on line 54 I placed

filename: '../css/[name].css'

The plugin is based on Webpack it takes the same principle — one output. If you want more outputs you must use [name] parameter.

The output will look like:

app.css
frontend.css
admin.css
manage.css

Testing

To be able to test you can just fire

mix phx.server

it will start and compile both the code and call Webpack build. This is a bit inconvenient.

By coincident I see another command config/dev.exs:

cd assets
webpack --mode development

This is shorter but you have to cd to the assets folder.

Troubleshooting

Webpack in phoenix is configured to output the file in priv/statics/[css]|[js].

Check priv/statics where the assets are generated. Sometime it might not place in the right folder. You can play around with the config and compare the file and location it creates to have a better understanding.

Conclusion

Phoenix 1.4 does not have many docs about assets handling. But if you take a deeper look, the assets are being managed by webpack. So what Webpack does, it can be applied to the integration of the assets in Phoenix 1.4.

You might need to learn a bit of Webpack to be able to make it right. Webpack is becoming a de-facto build tool for modern framework today. Overall I think it is a good experience to try.