logo标签列表

Webpack HTML（EJS）包含其他模板

webpacktemplate-engineejswebpack-dev-serverhtml-webpack-plugin
5

这是我的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'
        })
    ]

};

我的index.ejs文件：

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

</body>

</html>

我的文件夹结构：

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

我想将我的html文件模块化，因此我想把它们包含进来...
我尝试了很多方法，包括使用另一个模板，但都没有成功...
有人能给我任何建议吗？如何使这个工作？
3个回答
5
使用ejs-render-loader包。 查看包。
plugins: [
    new HtmlWebpackPlugin({
        hash: true,
        template: 'ejs-render!./dev/index.ejs',
        inject: 'body'
    })
]

我认为这将解决你的问题。

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

404页面未找到。 - zipper
0

ejs-webpack-loader 对我很有效（"ejs-webpack-loader": "^2.2.2", "webpack": "^4.41.5"）。它的网页上有一个包含示例ejs。

-1

您正在使用html插件，请确保它支持ejs，同时查看是否出现任何错误，例如是否需要使用任何ejs加载器。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接