Geek Answers Handbook

Webpack html (ejs) includes other templates

So this is my webpack configurator:

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 modulate my html file, so I want to include them ...

I tried many methods, including another template, but none of them worked ...

Can anyone give me any ideas on how I can do this?

+5
source share
2 answers

Use the ejs-render-loader package. see package

 plugins: [ new HtmlWebpackPlugin({ hash: true, template: 'ejs-render!./dev/index.ejs', inject: 'body' }) ]

I think this will solve your problem.

update: syntax for loaders has changed with webpack3. 'ejs-render!./dev/index.ejs' should now be: 'ejs-render-loader!./dev/index.ejs'

+3
source

You are using the html plugin, make sure it supports ejs and also searches if you get any error, for example, if you need to use any öoader for ejs.

0
source

More articles:


All Articles