CODEWITHSUNDEEP
webpacktemplate-engineejswebpack-dev-serverhtml-webpack-plugin
Mark Spencer
Mark Spencer

Reputation: 81

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?

Upvotes: 5

Views: 9479

Answers (3)

zipper
zipper

Reputation: 397

ejs-webpack-loader works for me ("ejs-webpack-loader": "^2.2.2", "webpack": "^4.41.5"). There is a include example ejs at it's web page.

Upvotes: 0

deju
deju

Reputation: 1028

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'

Upvotes: 5

Jorawar Singh
Jorawar Singh

Reputation: 7621

You are using html plugin, make sure if it support ejs and also look for if you are getting any error like if you need to use any öoader for ejs.

Upvotes: -1

Related Questions