В 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 тоже?