如何在 html-webpack-plugin 中同时获得 EJS 编译和 html-loader？

Question

I want my html-webpack-plugin to generate my html based on my .ejs template which also have some <img> tags.我希望我的html-webpack-plugin基于我的.ejs模板生成我的html ，其中也有一些<img>标签。
html-loader can change my <img> tags's image address to the one Webpack made, so I need it. html-loader可以将我的<img>标签的图像地址更改为 Webpack 制作的一个，所以我需要它。 I specifying this in rules我在rules指定了这个
```
 test: /\\.ejs$/, use: ['html-loader']
```

But doing that disables the fallback "ejs-loader" of html-webpack-plugin as mentioned in https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md (mentioned without answer) and so my <img> tags got replaced correctly but EJS not getting compiled.但是这样做会禁用html-webpack-plugin的后备“ejs-loader”，如https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md 中所述（未提及答案），所以我的<img>标签被正确替换，但 EJS 没有被编译。

If I remove this rule the EJS got compiled but the resulting html in my dist folder the <img> tags are still referring to old names.如果我删除此规则，EJS 会被编译，但我的dist文件夹中的结果 html <img>标签仍然引用旧名称。

I have also tried use: ['html-loader','ejs-compiled-loader'] which give me a strange module.exports = gibberish in my final HTML file (like it is to be invoked one last time, but didn't. Since Webpack says the final step expects a Javascrip or something..) while ONLY use: ['ejs-compiled-loader'] works fine (My EJS got compiled) and ONLY use: ['html-loader'] is also fine (my img tags got scanned)我也试过use: ['html-loader','ejs-compiled-loader']这给了我一个奇怪的module.exports = gibberish在我的最终 HTML 文件中的module.exports = gibberish （就像它最后一次被调用，但没有' t. 因为 Webpack 说最后一步需要 Javascrip 或其他东西..) 而只use: ['ejs-compiled-loader']工作正常（我的 EJS 被编译）并且只use: ['html-loader']也是很好（我的 img 标签被扫描了）

How to get both?两者如何获得？ Thanks.谢谢。

Answer 1

You can't.你不能。

The simplest way, that I found, is to stick to EJS-templates all the way (even if it hurts ;))我发现的最简单的方法是一直坚持使用 EJS 模板（即使它很痛苦；））

So, name your template something that ends with .ejs.因此，将模板命名为以 .ejs 结尾的名称。

index.ejs索引.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebPack Labs 001</title>
</head>
<body>
<h1><%= htmlWebpackPlugin.options.title %></h1>
<img src="<%= require('./img/kolfiber.jpg') %>" alt="">
</body>
</html>

Note the:请注意：

<img src="<%= require('./img/kolfiber.jpg') %>" alt="">

This is what makes the image(s) work.这就是使图像起作用的原因。

This is what my plugins looks like in webpack.config.js:这是我的插件在 webpack.config.js 中的样子：

plugins: [
            new HtmlWebpackPlugin({
                template: 'src/index.ejs',
                title: 'HTML Webpack Plugin',
            })
        ],

And here's the output:这是输出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebPack Labs 001</title>
<link href="/main.a543702ae62bbf007a2ec7ee6fb3571c.css" rel="stylesheet"></head>
<body>
<h1>HTML Webpack Plugin</h1>
<img src="/static/media/images/kolfiber.a3a95779.jpg" alt="">

<script type="text/javascript" src="/main.a713c115b35765d7d4ed.js"></script></body>
</html>

My complete, current config (not just for this example):我完整的当前配置（不仅仅是这个例子）：

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const I18nPlugin = require('i18n-webpack-plugin');
const path = require('path');

const languages = {
    en: null,
    de: require('./src/app/lang/de.json'),
};

module.exports = env => {
    console.log(env);

    const config = {
        entry: './src/app/js/index.js',
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: '[name].[hash].js',
            publicPath: '/',
        },
        module: {
            rules: [
                {
                    test: /\.(gif|jpe?g|png|webp)$/,
                    loader: 'file-loader',
                    query: {
                        limit: 8192,
                        name: 'static/media/images/[name].[hash:8].[ext]',
                    },
                },
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: 'css-loader',
                    }),
                },
                {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: ['css-loader', 'sass-loader'],
                    }),
                },
                {
                    test: /\.txt$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                            },
                        },
                    ],
                },
            ],
        },
        plugins: [
            new webpack.DefinePlugin({
                PRODUCTION: JSON.stringify(true),
                LANGUAGE: languages,
            }),
            new HtmlWebpackPlugin({
                template: 'src/index.ejs',
                title: 'HTML Webpack Plugin',
            }),
            new ExtractTextPlugin({
                filename: '[name].[contenthash].css',
                disable: process.env.NODE_ENV === 'development',
            }),
            new I18nPlugin(languages.de, {
                failOnMissing: true,
                hideMessage: false,
            }),
        ],
    };

    return config;
};

如何在 html-webpack-plugin 中同时获得 EJS 编译和 html-loader？

问题描述

1 个解决方案

解决方案1
9 2018-01-13 17:54:09

如何在 html-webpack-plugin 中同时获得 EJS 编译和 html-loader？

问题描述

1 个解决方案

解决方案1 9 2018-01-13 17:54:09

解决方案1
9 2018-01-13 17:54:09