Question

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

但这样做会禁用html-webpack-plugin中提到的<img>的后备“ejs-loader”，如果没有回答提到，所以我的dist标签被正确替换但是EJS没有被编译

如果删除此规则，EJS会被编译，但<img>文件夹中生成的html use: ['html-loader','ejs-compiled-loader']标记仍然是指旧名称。

我也试过module.exports = gibberish在我的最终HTML文件中给了我一个奇怪的use: ['ejs-compiled-loader']（就像它最后一次被调用，但没有。因为Webpack说最后一步预计一个Javascrip或其他..）虽然只有use: ['html-loader']工作正常（我的EJS已编译）并且只有$userID = Yii::$app->user->id; $isGuest = Yii::$app->user->isGuest;也很好（我的img标签被扫描）

如何获得两者？感谢。

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

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

1 个答案: