Блог

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']  }  }  },