Programming Phoenix 1.4

Adding JavaScript

webpack^[27] is a build tool written in Node.js. We’ll use webpack to build, transform, and minify^[28] JavaScript and CSS code. Processing assets in this way makes your page load much more efficiently. webpack not only takes care of JavaScript but also CSS and all of our application assets, such as images.

The asset structure is laid out in the assets directory:

assets/
├── css/
├── js/
├── static/
├── vendor/
├── package.json
└── webpack.config.js

We put everything in assets/static that doesn’t need to be transformed by webpack. The build tool will simply copy those static assets just as they are to priv/static, where they’ll be served by Plug.Static in our endpoint.

We keep CSS and JavaScript files in their respective ...