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

【问题标题】：How to get both EJS compilation and html-loader in html-webpack-plugin?如何在 html-webpack-plugin 中同时获取 EJS 编译和 html-loader？
【发布时间】：2018-04-17 03:52:43
【问题描述】：

我希望我的html-webpack-plugin 基于我的.ejs 模板生成我的html，该模板也有一些<img> 标签。
html-loader 可以将我的<img> 标签的图像地址更改为Webpack 制作的那个，所以我需要它。我在rules
中指定了这一点
```
            test: /\.ejs$/, 
            use: ['html-loader'] 
```

但是这样做会禁用https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md 中提到的html-webpack-plugin 的后备“ejs-loader”（没有回答），因此我的<img> 标签被正确替换，但 EJS 没有被编译。

如果我删除此规则，EJS 会被编译，但我的 dist 文件夹中生成的 html 文件夹中的 <img> 标记仍然指的是旧名称。

我也尝试过use: ['html-loader','ejs-compiled-loader']，它在我的最终 HTML 文件中给了我一个奇怪的module.exports = gibberish（就像上次调用它一样，但没有。因为 Webpack 说最后一步需要一个 Javascrip 或其他东西..) 虽然只有 use: ['ejs-compiled-loader'] 工作正常（我的 EJS 已编译）并且只有 use: ['html-loader'] 也很好（我的 img 标签被扫描）

如何同时获得？谢谢。

【问题讨论】：

你可以。我刚刚找到了如何做到这一点的解决方案并发布了答案。这是不要重复的链接：stackoverflow.com/a/61795641/1059736

标签： javascript html webpack

【解决方案1】：

你不能。

我发现，最简单的方法是一直坚持使用 EJS 模板（即使会很痛苦；））

所以，请将您的模板命名为以 .ejs 结尾的名称。

index.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>

注意：

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

这就是图像工作的原因。

这就是我的插件在 webpack.config.js 中的样子：

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

这是输出：

<!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>

我完整的当前配置（不仅仅是这个例子）：

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;
};

【讨论】：

对我来说效果很好！只是不要忘记将esModule: false 选项添加到您的文件加载器，否则，它将显示[object Object] 而不是在我的情况下的URL。
很好，但我的下一个问题是图像 src，我是一个在 require() 中不起作用的变量。任何方式使用 " alt=""> ？谢谢。