Асеты ў JavaScript бандлах у Webpack
Давайце наладзім асеты для .png
файлаў:
export default {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist')
},
module: {
rules: [
{
test: /\.png$/,
type: 'asset/resource'
}
]
},
plugins: [
new HtmlWebpackPlugin(),
],
};
Падключым .png файл да кропкі ўваходу:
import img from './images/main.png';
У зменную img трапіць
новы шлях да файла карцінкі:
console.log(img);
Наладзіце асеты для .jpg
файлаў.
Падключыце да кропкі ўваходу некалькі карцінак.
Вывядзіце ў файле кропкі ўваходу новыя шляхі да карцінак.