Я начинаю новый проект с белого листа с конфигурацией веб-пакета.
Я пытаюсь импортировать изображение в мой html, и у меня есть эта ошибка в моей консоли: ошибка консоли
Здесь вы можете показать часть моей конфигурации веб-пакета:
module.exports = {
entry: {
app: 'src/assets/js/index.js',
style: 'src/assets/scss/styles.scss',
},
output: {
filename: "src/assets/js/index.[hash:8].js",
path: path.join(__dirname, 'build')
},
devServer: {
contentBase: "./build"
},
resolve: {
modules: [path.resolve(__dirname), 'node_modules', '../../../../plugins/'],
extensions: ['.js'],
alias: {
jquery: path.join(__dirname, '/node_modules/jquery/dist/jquery.min.js'),
'slick-carousel': path.join(__dirname, '/node_modules/slick-carousel/slick/slick.js')
}
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: { importLoaders: 1 }
},
{
loader: 'postcss-loader',
options: {
config: {
path: path.resolve(__dirname + '/postcss.config.js')
}
}
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: './img/',
outputPath: 'img'
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: './fonts/',
outputPath: 'fonts'
}
}
]
}
]
},
Структура моих папок: папки
код для импорта изображения:
<section class="header">
<h1><img src='../img/logo-texte.png' alt="Le Grand Dressing"/></h1>
</section>
У кого-нибудь есть идея? :( спасибо тебе