Phoenix viene por defecto con brunch para hacer el manejos de archivos estáticos(js, css, etc), pero puede darse el caso de que se necesite usar otra herramienta diferente a brunch como por ejemplo webpack.
Primero debemos crear un proyecto nuevo en phoenix con el flag --no-brunch
para que no se generen los archivos de brunch.
mix phoenix.new hello --no-brunch
Ahora deberemos generar el archivo package.json
e instalar webpack.
npm init
npm install --save-dev webpack
Ahora debemos crear el archivo de configuración de webpack.
// webpack.config.js
module.exports = {
entry: './web/static/js/app.js',
output: {
path: './priv/static/js',
filename: 'app.js'
},
resolve: {
modulesDirectories: [__dirname]
}
}
Ahora debemos configurar un watcher en phoenix para que cuando hagamos algún cambio este automaticamente corra el watcher de webpack, para eso debemos agregar lo siguiente en el archivo config/edv.exs
.
node: ["node_modules/webpack/bin/webpack.js", "--watch", "--color"]
Ahora cuando ejecutemos iex -S mix phoenix.server
también se ejecutará el watcher de webpack.