Как заставить webpack самостоятельно загружать файлы для тегов video, video(poster) и тд?

Question

[Destell]

Конфиг

spoiler

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const webpack = require('webpack');

const pug = require('./webpack_config/pug');
const devserver = require('./webpack_config/devserver');
const sass = require('./webpack_config/sass');
//const compass = require('./webpack_config/compass');
//const resourcesLoader = require('./webpack_config/resources.loader');
const css = require('./webpack_config/css');
const extractCSS = require('./webpack_config/css.extract');
const uglifyJS = require('./webpack_config/uglifyjs');

//babel
const babel = require('./webpack_config/babel');
//const babelLoader = require('./webpack_config/babelLoader');

const typescript = require('./webpack_config/typescript');

//file-loader
const images = require('./webpack_config/images');
const fonts = require('./webpack_config/fonts');


const PATHS = {
	source: path.join(__dirname, '_autovep'),
    build: path.join(__dirname, '_autovep-build'),
};

const common = merge([
    {
        entry: {
			'index': PATHS.source + '/pages/index/index.js',
			
			/* end */
		},
        output: {
			path: PATHS.build,
			filename: './assets/js/[name].js',
			library: '[name]',
            libraryTarget: 'umd',
            libraryExport: 'default',
            umdNamedDefine: true,
		},
        plugins: [
			new HtmlWebpackPlugin({
				favicon: '_autovep/favicon.png',
				filename: 'index.html',
				chunks: ['index', 'common'],
				template: PATHS.source + '/pages/index/index.pug',
			}),	
									
			/* end */
			
			new webpack.optimize.CommonsChunkPlugin({
				name: 'common'
			}),			
			
			new webpack.ProvidePlugin({
				$: 'jquery',	 
				jQuery: 'jquery'    
			}),
		],
    },

    pug(),
	images(),
	fonts(),
]);

module.exports = function(env) {
	process.env.mode = env;
    if (env === 'production') {
		return merge([
			common,
			extractCSS(),
			uglifyJS,
			babel,
		]);
	} else if (env === 'development') {
        return merge([
            common,
            devserver(),						
			sass(),
			//compass(),
			//resourcesLoader(),
			css(),
			babel,
        ]);
    }
};

Использую file loader так

spoiler

module.exports = function() {
	return {
		module: {
			rules: [
				{
					test: /\.(jpg|png|svg|gif|ico)$/,
					loader: 'file-loader',
					options: 
						{
							name: 'assets/images/[name].[ext]'
						},
				},
				{
					test: /\.(mov|mp4)$/,
					loader: 'file-loader',
					options: 
						{
							name: 'assets/video/[name].[ext]'
						},
				},
			],
		},
	};
};

И jade

spoiler

/* main */
module.exports = function() {
    return {
        module: {
            rules: [
                {
                    test: /\.pug$/,
					use: [
					  'html-loader',
					  'pug-html-loader?{"pretty":true,"exports":false}'
					],
                }
            ]
        }
    };
};

По умолчанию загружаются только файлы для тегов img
img(src='../../images/logo/logo.svg' alt='')
При этом правильно меняя ссылки на файлы внутри папки с билдом.
Все прочие не подтягиваются.

img(src=require выбивает ошибку.

Пробовал прописать отдельно настройки html loader, типа

spoiler

module: {
    rules: [
      { test: /\.jpg$/, use: [ "file-loader" ] },
      { test: /\.png$/, use: [ "url-loader?mimetype=image/png" ] }
    ]
  },

Не сработало. Что еще можно сделать?

UPD:
нашел решение. зайдя в node_modules и отредактировав файл html-loader, добавив нужные теги

var attributes = ["img:src", "source:src", "video:poster"];

Но это как-то очень странно

Answer 1

[Destell]

нашел решение. зайдя в node_modules и отредактировав файл html-loader, добавив нужные теги

var attributes = ["img:src", "source:src", "video:poster"];