Question about integration of html-webpack-plugin with html.eex

Questions & Help Questions
1

Hi!
I am working on simple phoenix app using Webpack 2
and using “CommonsChunkPlugin”.

I don’t want to replace script tag in app.html.eex on every new build of js and css files.
So I installed html-webpack-plugin and set it up like this.

plugins: [

new webpack.optimize.CommonsChunkPlugin({
  names: ['app']
}),
new HtmlWebpackPlugin({
  **template: "../lib/mmarketing_web/templates/layout/app.html.eex"**
})

]

As I expected(?), I got an error like this.

Module build failed: SyntaxError: Invalid or unexpected token

I think html-webpack-plugin doesn’t recognize html.eex.

Anyone has any solution to this?

Thanks!

2

Phoenix does this already for you out of the box. Thats what the <%= %> tag is doing. If you run mix phx.digest it will modify the output you see in the browser for that file name. I don’t think you need to use the html-webpack-plugin at all with phoenix.

3

Oh! Thank you!

4

But HTMLWebpackPlugin does more than that. It inserts css, preloads scripts and what not. Optimally the tags in <head> would be merged into the Phoenix layout template and the body imported into whatever template use the JS app.

I’m using Vue with Vue-CLI, and it would be great to be able to constuct HTML using information from both the Vue project and the Phoenix backend.

5

This can be done with html-webpack-plugin using raw-loader and the template and filename configuration properties.