Question

当我分别使用ejs-loader和html-loader时，一切都很好：

<body>
    <%= require('./header.html')({x:1})  %>
</body>

// compiles to:

<body>
    <header><div>1</div></header>
</body>

但是当我链接它们时，我得到的是js代码而不是html：

module.exports = function (obj) {
obj || (obj = {});
var __t, __p = '';
with (obj) {
__p += '\n<body>\n  ' +
((__t = ( require('./header.html')({x:1})  )) == null ? '' : __t) +
'\n</body>';

}
return __p
}

正在发生什么，我该如何解决？

这是我的配置：

const config = {
    //...
    module: {
        rules: [
            {
                test: /\.html$/,
                use: ['html-loader', 'ejs-loader']
            }
        ]
    },
    //...
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
        })
    ]

}

Answer 1

我现在正努力解决相同的问题，并找到了答案。

首先，我们需要了解装载机的工作方式。简而言之：它们采用任何文件类型作为输入，但是加载程序的输出始终是JS，然后执行webpack以获得最终输出。

ejs-loader和html-loader都希望html代码作为输入。当我们链接加载程序时，第二个加载程序接收的不是HTML，而是第一个加载程序返回的javascript。因此，我们需要使用该JS制作HTML。为此，我编写了一个简单的加载器，需要将其放在html和ejs加载器之间。

我们称之为“ loader.js”：

module.exports = function (source) {
    let x = eval(source);
    let z = x();
    return z;
}

Webpack的配置将是：

module: {
    rules: [
        {
            test: /\.html$/,
            use: ['html-loader', path.resolve('loader.js'), 'ejs-loader']
        }
    ]
},

重要提示：订单或装载机很重要。如果我在链中交换ejs和html加载程序，则eval失败，因为html-loader返回js代码，该代码具有eval无法解析的其他导入。但是ejs-loader返回的纯自包含代码将成功使用eval（）进行评估。

因此，由于加载器以相反的顺序执行，因此我们将ejs首先放置（意思是-在数组的末尾），然后放置中间加载器，而html-loader则放在最后（在数组的开头）

Webpack：链式装载机

1 个答案: