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?

回答1:

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'

回答2:

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.

来源：https://stackoverflow.com/questions/39063450/webpack-html-ejs-include-other-templates

标签

Webpack

template-engine

ejs

webpack-dev-server

html-webpack-plugin