#javascript #html #webpack
Вопрос:
html-загрузчик не работает, когда я пытаюсь создать свои рабочие файлы.
Эти ошибки отображаются только тогда, когда я пытаюсь создавать файлы, а в srcset
HTML-файлах есть атрибуты lt;imggt;
и lt;sourcegt;
элементы. lt;imggt;
элементы с src
атрибутом создаются без ошибок.
-2 ОШИБКИ в дочерних компиляциях (используйте ‘stats.children: true’ отв. ‘—статистика-дети’ для более подробной информации) -Ошибка синтаксического анализа-Ошибка модуля
Сообщение об ошибке очень длинное, вот начало сообщения об ошибке: Вот окончание сообщения об ошибке:
Конфигурация моих загрузчиков и плагинов в webpack.common.js файл. В этой конфигурации у меня есть приведенное выше сообщение об ошибке. Я пробовал разные конфигурации и опции, но результат был один и тот же.
module.exports = { entry: "./src/index.js", //devtool: "none", module: { rules: [ { test: /.scss$/, use: ["style-loader", "css-loader", "sass-loader"] } , { test: /.html$/i, use: { loader: "html-loader", options: { sources: { list: [ // All default supported tags and attributes "...", { tag: "img", attribute: "src", type: "src", }, { tag: "img", attribute: "srcset", type: "srcset", }, { tag: "source", attribute: "srcset", type: "srcset", }, ], urlFilter: (attribute, value, resourcePath) =gt; { // The `attribute` argument contains a name of the HTML attribute. // The `value` argument contains a value of the HTML attribute. // The `resourcePath` argument contains a path to the loaded HTML file. if (/example.pdf$/.test(value)) { return false; } return true; }, } } } }, { test: /.(png|jpe?g|gif|svg)$/i, type: 'asset/resource' } ] }, plugins: [ new HtmlWebpackPlugin({ template: "./src/template.html" }), new HtmlWebpackPlugin({ filename: "about.html", template: "./src/about.html" }), new HtmlWebpackPlugin({ filename: "skills.html", template: "./src/skills.html" }), new HtmlWebpackPlugin({ filename: "work.html", template: "./src/work.html" }), new HtmlWebpackPlugin({ filename: "contact.html", template: "./src/contact.html" }) ],}
Here is my webpack.prod.js
module.exports = merge(common, { mode: "production", output: { filename: "main.[contenthash].js", path: path.resolve(__dirname, "dist"), assetModuleFilename: "assets/imges/[name].[hash][ext]" }});
Example of my HTML code with responsive images:
lt;picturegt; lt;source media="(max-width: 767px)" sizes="(max-width: 767px) 100vw, 767px" srcset="assets/images/workplace/workplace-11-480.jpg 480w, assets/images/workplace/workplace-11-767.jpg 767w"gt; lt;source media="(min-width: 768px) and (max-width: 991px)" sizes="(max-width: 991px) 70vw, 694px" srcset="assets/images/workplace/workplace-43-538.jpg 538w, assets/images/workplace/workplace-43-694.jpg 694w"gt; lt;source media="(min-width: 992px) and (max-width: 1199px)" sizes="(max-width: 1200px) 60vw, 720px" srcset="assets/images/workplace/workplace-169-596.jpg 596w, assets/images/workplace/workplace-169-720.jpg 720w"gt; lt;img sizes="(max-width: 6183px) 40vw, 2473px" srcset="assets/images/workplace/workplace-480.jpg 480w, assets/images/workplace/workplace-922.jpg 922w, assets/images/workplace/workplace-1160.jpg 1160w, assets/images/workplace/workplace-1350.jpg 1350w, assets/images/workplace/workplace-1528.jpg 1528w, assets/images/workplace/workplace-1672.jpg 1672w, assets/images/workplace/workplace-1762.jpg 1762w, assets/images/workplace/workplace-1818.jpg 1818w, assets/images/workplace/workplace-1950.jpg 1950w, assets/images/workplace/workplace-2164.jpg 2164w, assets/images/workplace/workplace-2473.jpg 2473w" src="assets/images/workplace/workplace-2473.jpg" alt=""gt; lt;/picturegt;
I was able to build my production files with html-loader-srcset
but I still get the same error message when I try extend default sources with href
of a
element.
My goal is to make sure that when image files are copied into my dist production directory by webpack, paths in src
and srcset
attributes and href
attr change according to a new image file path.
This is working on elements lt;imggt;
and lt;sourcegt;
with srcset
attr
{ test: /.html$/i, use: { loader: "html-loader", options: { attrs: [':src', ':srcset'] } } },
This is not working:
, { test: /.html$/i, use: { loader: "html-loader-srcset", options: { attrs: [':src', ':srcset', 'a:href'] } } },