内联样式和 html-webpack-plugin

Question

我正在使用 html-webpack-plugin 的模板文件。到目前为止，我在模板中为我的图像使用了 img 标签，并且 file-loader 处理得很好。但是如果我尝试设置内联元素的背景图像，file-loader 不会被触发并且图像不会移动到我的构建文件夹中。

有问题的模板文件片段：

<div class="slide" style="background-image: url('assets/imgs/Portfolio/AFTO.png')"></div> // This image is not loaded
<div class="slide">
    <img src="assets/imgs/Portfolio/BTB.png" alt=""> // This image is loaded fine, hash and all
</div>

webpack 配置：

const webpack = require('webpack'),
      path = require("path"),
      fs = require("fs"),
      Inject = require('webpack-inject-plugin').default, { ENTRY_ORDER } = require('webpack-inject-plugin'),
      HtmlWebpack = require('html-webpack-plugin'),
      { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: "development",
    devtool: "inline-source-map",
    entry: path.resolve(__dirname, './js/app.js'),
    output: {
        filename: "app.[contentHash].js",
        path: path.resolve(__dirname, "./build")
    },
    devServer: {
        contentBase: './build'
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.(png|gif|jpeg|jpg|svg)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'imgs'
                    }
                }
            },
            {
                test: /\.(woff|eot|ttf)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'fonts'
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            // global utils
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new Inject(() => fs.readFileSync('./js/vendor/t.js-master/t.js', {encoding: 'utf-8'}), {
            entryOrder: ENTRY_ORDER.Last
        }),
        new HtmlWebpack({
            template: 'template.html'
        }),
        new CleanWebpackPlugin({ cleanStaleWebpackAssets: false })
    ]
}

我对此感到惊讶，因为我认为 webpack 查找文件的 url，而不是 html 标签。有解决方法吗？谢谢。

Answer 1

我认为有一种方法可以通过简单地使用 html-webpack-plugin 的插值语法来实现您的目标，而不必使用 html-loader（可能会发生冲突）。

以下是几个步骤：

更改您的模板以使用插值语法来要求图像：

<div style="background-image: url(<%= require('assets/imgs/Portfolio/AFTO.png') %>" />

禁用 file-loader 的 esModule 选项以使 require 功能无需 .default:

webpack.config.js

{
  loader: 'file-loader',
  options: {
    // ...
    esModule: false,
  }  
}

最后，我们可能需要删除 html-loader 以避免无法编译插值语法

内联样式和 html-webpack-plugin

Inline Styling and html-webpack-plugin

background-image

webpack

html-webpack-plugin