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!
3 Likes
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 Likes
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.
This can be done with html-webpack-plugin
using raw-loader
and the template
and filename
configuration properties.