Блог

Я хочу добавить хэш содержимого к изображениям, сгенерированным в моей конфигурации webpack. Файлы выводятся с хэшем, но я не уверен, как вставить их в мой html. HTML с генерируется с помощью pug и HtmlWebpackPlugin.

Соответствующие фрагменты webpack.config.js:

     {
        test: /.(jpeg|jpg|png|gif)$/,
        use: [
            'file-loader?name=images/[name].[contenthash:4].[ext]',
            {
                loader: 'image-webpack-loader',
                options: {
                    mozjpeg: {
                        progressive: true,
                        quality: 65
                    }
                }
            }
        ]
    },

    new HtmlWebpackPlugin({
        template: './src/pug/index.pug',
        filename: 'index.htm',
        inject: true
    })
  

Изображение в pug, где я хочу вывести правильное имя файла:

 img(src='/images/logo.png') <-- this needs to be img(src='/images/logo.64fd.png')
  

У меня возник тот же вопрос; ниже приведены примеры кода из разработанного мной решения.

Главное, что мне помогло, — это загрузчик pug README.md Раздел «Встроенные ресурсы»: «Попробуйте использовать require для всех ваших встроенных ресурсов, чтобы обработать их с помощью webpack».

До тех пор, пока вам требуются ваши файлы должным образом, Webpack добавит их в свой график зависимостей и обработает их в соответствии с правилами конфигурации, которые вы определяете для каждого типа расширения файла. Эта обработка включает добавление contenthash имен файлов к вашим изображениям в выходных данных HTML в соответствии с методом, который вы указываете в объекте конфигурации загрузчика файлов options.name .

Конфигурация Webpack:

 // webpack.common.js
// (edited/trimmed for clarity)
module.exports = {
    module: {
        rules: [{
            test: /.(jpeg|jpg|png|gif)$/,
            use: [
                {
                    loader: "file-loader",
                    /**
                     * use `name` to specify how and where images should be outputted
                     *
                     * 1. use the image's filepath to set the URL path from which it's served
                     * 2. use the image's filename and contenthash to set its URL filename
                     */
                    options: {
                        name: "[path][name].[contenthash].[ext]",
                        // you may need to set `outputPath` too if you want
                        // to specify how/where images should be outputted
                    },
                },
                {
                    loader: 'image-webpack-loader'
                },
            ],
        }],
    },
    plugins: [
        new HtmlWebpackPlugin({
            // set the base path that will be prepended on all relative-path tag attributes
            // ex: <img src/>, <link href/>, <script src/>, etc.
            publicPath: "/",
        }),
    ],
}
  

Шаблон Pug:

 // page.pug
// (edited/trimmed for clarity)
img(
    alt="Accessible alternate text"
    src=require("./images/image.jpg").default
)
  

Я также перечислил свои версии зависимостей ниже; могут быть различия в конфигурации из-за управления версиями пакета, но должны применяться те же общие принципы. Удачи!

 // package.json
// (edited/trimmed for clarity)
"devDependencies": {
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.1.0",
    "image-webpack-loader": "^7.0.1",
    "pug": "^3.0.0",
    "pug-loader": "^2.4.0",
    "webpack": "^5.22.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
}