@historydev
Редактирую файлы с непонятными расширениями

Как собирать ресурсы которые используются в html файле?

В html файле для прототипа я подключаю изображение таким образом:
<div class="ally">
					<img src="/assets/images/avatar.png" alt="">
				</div>


Веб пак его не собирает почему-то, однако если юзается в scss || js/ts собирается.
Мой конфиг (common) выглядит вот так:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

function getPath() { return path.resolve(__dirname, ...arguments || '') }

module.exports = {
    entry: {
        index: [
            getPath('..', 'src/core', 'main.ts'),
            getPath('..', 'src/assets/styles/main', 'main.scss'),
        ],
        test: [
            getPath('..', 'src/core', 'test.ts')
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'test.html',
            template: getPath('..', 'src/views', 'test.html'),
            chunks: ['test']
        })
    ],
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            configFile: getPath('tsconfig.json')
                        }
                    }
                ],
                exclude: /node_modules/,
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
                type: 'asset/resource'
            }
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'assets/scripts/[name].bundle.js',
        path: getPath('..', 'dist'),
        clean: true,
        assetModuleFilename: 'assets/images/[name][ext]'
    },
};


Как собирать ассеты из html тоже?
  • Вопрос задан
  • 30 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы