With webpack that would be accomplished with something like
See also: Should I move from brunch to webpack? - #14 by peerreynders
I’m using Brunch and Babel (added by the framework).
I assume that “the framework” refers to Phoenix.
phoenixframework:master ← phoenixframework:gr-webpack
opened 09:20PM - 02 Mar 18 UTC
Since brunch hasn't been updated in a while, webpack has been chosen as a replac… ement.
webpack 4 reduces a lot of the config required, the included configuration is
designed so that the compiled assets act the same way as they did with bruch (js
goes in `priv/static/js/app.js` and css in `priv/static/css/app.js`. Any assets
in `assets/static` are copied over to `priv/static`.
All references to brunch have been replaced by webpack. The `--no-bruch` flag is
now `--no-webpack`.
Stylistically, webpack is written with a lower case "w" - so this has
been used in any comments/documentation.
Description how to use webpack 4 (with Phoenix 1.3.x) instead of brunch:
# Adding webpack 4.0.x
March 2018.
As I choosed not to install brunch, I will add webpack 4 as a replacement. I am using yarn, but this can be done with npm as well. This is not a guide on using Webpack 4, just a simple way to add Webpack to a Phoenix umbrella application.
References:
* [Notes on attempt to upgrade to webpack 4](https://gist.github.com/gricard/e8057f7de1029f9036a990af95c62ba8)
* [Code splitted css bundle examples](https://github.com/webpack/webpack/blob/master/examples/code-splitted-css-bundle/README.md)
Additional packages, needed for configuration.
* [webpack-cli](https://github.com/webpack/webpack/releases/tag/v4.0.0-beta.0)
* [extract-text-webpack-plugin@next](https://github.com/webpack-contrib/extract-text-webpack-plugin/tree/next)
The following steps are defined from the root of the project.
## 1. Initialize assets and package.json
show original
alternate
That being said recommended practice is to limit the reliance on environment variables to one, single variable typically process.env.NODE_ENV - which is then used to select the correct module (e.g. settings.prod.js vs. settings.dev.js) to include in the generated JS bundle.
SurviveJS: Choosing which module to use
A similar approach seems to be possible with brunch with the jsenv-brunchnpm ).
