/ webpack

Configurar webpack en Phoenix

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.