webpack html(ejs)包含其他模板

Question

webpack html(ejs)包含其他模板

Mar*_*cer 5 template-engine ejs webpack webpack-dev-server html-webpack-plugin

所以这是我的webpack配置:

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'
        })
    ]

};

Run Code Online (Sandbox Code Playgroud)

我的index.ejs档案:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <%- include html/one/1.ejs %>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

我的文件夹结构:

dev/
  /assets
  /html
    /one
      1.ejs
      1.scss
      1.js
    /two
    /three
  index.js
  index.ejs

Run Code Online (Sandbox Code Playgroud)

我想模块化我的html文件,所以我想要包含它们......

我尝试了很多方法,包括另一个模板,但没有一个工作...

有人能给我任何想法,我怎么能做这个工作？

Answer 1

dej*_*eju 5

使用ejs-render-loader包装。看包

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

Run Code Online (Sandbox Code Playgroud)

我认为它将解决您的问题。

更新：使用webpack3，加载程序的语法已更改。'ejs-render!./dev/index.ejs'现在应该是：'ejs-render-loader!./dev/index.ejs'

Answer 2

Jor*_*ngh -1

您正在使用 html 插件，请确保它是否支持 ejs，并检查您是否收到任何错误，例如您是否需要对 ejs 使用任何 \xc3\xb6oader。

\n

归档时间：	9 年，5 月前
查看次数：	6532 次
最近记录：	8 年，7 月前