.ejs 模板中图像的 Webpack File/Image 加载器

Question

如果图像标签在我的 index.ejs 模板中，我似乎缺少在 webpack 配置中加载图像的设置。

我的项目 html 文件中的所有图像在构建过程中都正确重命名并正常加载，但 .ejs 文件中的图像标签被忽略。

即在我的 .ejs 中，如果我有 <img src="../../home.png">，它会保持这种状态，但在正常的 html 文件中，它会更改为 <img src="12345677.png">

我目前的装载机：

loaders: [
            //HTML Files
            {
                test: /\.html$/,
                loader: 'html'
            },
            //Transpile ES6 to ES5
            {
                test: /\.js$/,
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: [
                        ["es2015", {"module": false}]
                    ]
                }

            },
            //Extract Normal CSS
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ loader : 'css?sourceMap!autoprefixer', publicPath: "../"})

            },
            //Bundle Less into CSS Code
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({ loader : 'css?sourceMap!autoprefixer!less?sourceMap', publicPath: "../"})
            },
            //Images
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                loader: 'file'
            }
        ]

和重要的插件：

plugins.push(
            new HtmlWebpackPlugin({
                hash: true,
                filename: 'index.html',
                template:  './src/index.ejs',
                favicon: './src/favicon.ico',
                inject : false
            }),
            // Write out CSS bundle to its own file:
            new ExtractTextPlugin({
                filename: 'css/[contenthash].styles.css',
                allChunks: true
            }),
        );

Answer 1

我认为 ejs 不支持图像加载器

你可以试试这个linkunderscore-template loader to load the image files as suggested by author in this thread

webpack 的其他加载器包括 ejs-loader

Answer 2

只是为了提供更新的答案。在 Webpack 4 中，您可以加载 .ejs 个文件中的图像，而无需 html-loader.

将 img 标签中的 src 属性更改为：

<!-- index.ejs -->
<img src="<%= require('../../home.png') %>" alt="image text">

使用 esModule: false

启用 CommonJS 模块语法

// webpack.config.js
module: {
  rules: [
    ...,
    test: /\.(png|jpg|etc)$/,
    use: [{
      loader: "file-loader", // or url-loader
      options: {
        ...,
        esModule: false,
      }
    }]
  ]
}

如果您希望在 require 中使用变量，您可能需要更改语法，请参阅此 other SO question and this example on Github:

// webpack.config.js
new HtmlWebpackPlugin({
    image: '/path/to/image.png',
})

<!-- index.ejs -->
<img src="<%=require('html!./' +htmlWebpackPlugin.options.image + '.html' ) %>" alt="image text">

.ejs 模板中图像的 Webpack File/Image 加载器

Webpack File/Image loader for images in .ejs template

javascript

ejs

ecmascript-6

webpack