Какой путь для изображений правильный?

Question

[kirillleogky]

У меня следующая структура:

Мой исходный html - dist/landing/index.html:

<div class="header_block-logo">
                <div class="header_block-logo_text">Simple</div>
                <img src="../../src/img/logo_piskel.png" alt="Logo Piskel" class="header_block-logo_icon">
            </div>

вебпак конфиг:

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

module.exports = {
  entry: {
    app: './src/screens/app/index.js',
    landing: './src/screens/landing/index.js'
  },
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name]/main.js"
  },
  module: {
  rules: [
    {
      test: /\.js$/,
      enforce: 'pre',
      exclude: /node_modules/,
      loader: 'eslint-loader',
    },
    {
      test: /\.scss$/,
      use: [{
          loader: "style-loader"
      }, {
          loader: "css-loader"
      }, {
          loader: "sass-loader",
      }]
    },
    {
      test: /\.(jpg|png|svg|ttf|woff|eot)$/,
      loader: 'url-loader',
      options: {
       name: 'img/[name].[ext]',
      },
    }
  ],
 },
  plugins: [
   new HtmlWebpackPlugin({
     inject: true,
     chunks: ['app'],
     template: 'src/screens/app/app.html',
     filename: 'app/index.html'
   }),
   new HtmlWebpackPlugin({
     inject: true,
     chunks: ['landing'],
     template: 'src/screens/landing/landing.html',
     filename: 'landing/index.html'
   })
 ]
};

Загруженный проект - odd-frogs.surge.sh


При задании путей начинающейся с ../../src/ ничего не работает
Подскажите какие правильные пути для изображений нужно указать?

Comments

[Михаил]

от src/screens/landing/landing.html до файла

[kirillleogky]

Михаил, meaty-jump.surge.sh
я слева сверху лого поменял пути но не работает

<div class="header_block-logo_text">Simple</div>
<img src="../../img/logo_piskel.png" alt="Logo Piskel" class="header_block-logo_icon">

мой пути

Answer 1

[mahmudchon]

Правильный тот путь, по которому изображение по итогу доступно.
Вы указываете относительные пути, относительные расположению в файловой системе. Но, на сайте у Вас корневая папка получается landing и все что рядом с ней или просто "не в ней" - на сайте будет недоступно.

Comments

[kirillleogky]

mahmudchon только добавлять папку img в корень единственное решение?

[Михаил]

kirillleogky, если HtmlWebpackPlugin резолвит пути, тогда от html до файла, если нет, то пихайте статику в отдельную папку и при сборке копируйте файлы в dist и пути и тогда пути будут от корня

[kirillleogky]

Михаил, 'статику в отдельную папку и при сборке копируйте файлы в dist и пути и тогда пути будут от корня' - a как папку img закинуть с помощью webpacka?

[Михаил]

kirillleogky, https://webpack.js.org/plugins/copy-webpack-plugin/

[kirillleogky]

Михаил,
я имею ввиду как с помощью webpack перекинуть всю папку img в dist/landing/ ??

[Михаил]

kirillleogky, https://webpack.js.org/plugins/copy-webpack-plugin/

[kirillleogky]

Михаил, блин супер спасибо
крайний вопрос

подскажите как мне вывести в dist папку app без landing но чтобы файлы из landing сразу в dist?
для наглядности что я хочу:

что тут надо подправить:

entry: {
    app: './src/screens/app/index.js',
    landing: './src/screens/landing/index.js'
  },
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name]/main.js"
  },

[Михаил]

kirillleogky, ?
разделите понятия
1. исходных файлов
2. собранных файлов
3. статических файлов

[kirillleogky]

Михаил,
1) чтобы './src/screens/app/index.js' сохранялся в dist/app (сейчас он и сохраняется в dist/app)
2) чтобы './src/screens/landing/index.js' сохранялся в dist/ (сейчас он сохраняется в dist/landing)

[Михаил]

kirillleogky, сделайте 2 сборки вебпака с общими параметрами

const common = {}

module.exports = [
  {
    ...common,
    entry: ?,
    output: ?
  },
  {
    ...common,
    entry: ?,
    output: ?
  },
]

Или если output.filename принимает функцию, то смотрите по ситуации

Answer 2

[Евгений]

Папку img в папку landing

<img src="img/logo_piskel.png" alt="Logo Piskel" class="header_block-logo_icon">