webpack html (ejs) include other templates
So this is my webpack config :
import path from 'path';
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './dev/index.js'
},
output: {
path: path.join(__dirname, 'dist'),
// publicPath: 'http://localhost:3000/',
filename: 'bundle.js',
chunkFilename: '[id].bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: path.resolve(__dirname, "node_modules"),
loader: 'babel-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
hash: true,
template: 'ejs!./dev/index.ejs',
inject: 'body'
})
]
};
My index.ejs file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<%- include html/one/1.ejs %>
</body>
</html>
My folder structure :
dev/
/assets
/html
/one
1.ejs
1.scss
1.js
/two
/three
index.js
index.ejs
I want to modularize my html file so I want to include them...
I've tried a lot of methods including another template, but none of them worked...
Can someone give me any ideea of how can I make this work?
Answer
Use ejs-render-loader package. see package
plugins: [
new HtmlWebpackPlugin({
hash: true,
template: 'ejs-render!./dev/index.ejs',
inject: 'body'
})
]
I think it will solve your problem.
update: with webpack3 the syntax for loaders has changed. 'ejs-render!./dev/index.ejs' should now be: 'ejs-render-loader!./dev/index.ejs'