Webpack konfiguracja babel + scss

Próbuje skonfigurować webpack'a jednak doszedłem do momentu w którym chcę dodać babel, sass-loader i coś mi nie idzie na początku złączyłem wszystkie pliki js w jeden bundle.js. Teraz dodałem wszystkie potrzebne paczki do babel'a i scss'a. Importuje główny plik main.scss i bundle.js żeby paczki przemieliły to jednak coś nie idzie ktoś ma jakiś pomysł ? W załączniku wysyłam błąd z konsoli

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config webpack.config.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Raloseq/Portfolio.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Raloseq/Portfolio/issues"
  },
  "homepage": "https://github.com/Raloseq/Portfolio#readme",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^2.1.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  }
}

const path = require('path');
import './dist/bundle.js';
import './scss/main.scss';
module.exports = {
    entry: {
        'bundle.js': [
            path.resolve(__dirname, './js/nav.js'),
            path.resolve(__dirname, './js/typing.js'),
            path.resolve(__dirname, './js/about.js'),
            path.resolve(__dirname, './js/skills.js'),
            path.resolve(__dirname, './js/projects.js'),
            path.resolve(__dirname, './js/contact.js')
        ]
    },
    output: {
        filename: '[name]',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            {
                test: /\.(scss|sass)$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}

Nie powinieneś dorzucać swoich importów do webpack.config.js, tylko do Twojego głównego pliku aplikacji (app.js, main.js etc.).

Na temat odpowiadaj w postach:

Czyli jak do byle jakiego mam wrzucić

Nic takiego nie napisałem.

bo takiego stricte głównego nie mam

Zrób sobie pojedynczy entry i tam umieść importy (https://webpack.js.org/concepts/entry-points/).

I jeszcze pliki poprzednio szczepione też przejdą od razu przez babel nie muszę importować bundle.js

Niestety nie rozumiem tego zdania - mógłbyś spróbować wytłumaczyć inaczej?

Ok zrobiłem main.js zaimportowałem złączyło mi pliki , a z bablem mi chodziło o to czy od razu on konwertuje to na es5 jak mam ten kod podany co wyżej czy muszę coś jeszcze zrobić.

Z jakiego języka na jaki konkretnie chcesz konwertować?
Np. CoffeeScript -> ES5, TS -> ES5, ES6 -> ES5 itd.

ES6 -> ES5 zainstalowałem wszystkie paczki potrzebne

Zdaje się, że powinno działać w takiej formie jaką masz - możesz sam zobaczyć przecież w wynikowym pliku ;-)

Czy to odpowiada ""__esModule"" za to , że babel działa ? I jeszcze propo scss tak samo mam paczki zainstalowane tylko gdzie to zaimportować żeby działało niby widziałem , że do js ktoś importowałem ale czy to ma sens ?

Czy to odpowiada ""__esModule"" za to , że babel działa ?

Niestety nie rozumiem pytania.

I jeszcze propo scss tak samo mam paczki zainstalowane tylko gdzie to zaimportować żeby działało niby widziałem , że do js ktoś importowałem ale czy to ma sens ?

Powinieneś importować je w tym Twoim app.js / main.js / itd.; ma to jak najbardziej sens i jest standardowym podejściem w przypadku wykorzystywania Webpacka (dlatego też masz sass-loader w swojej konfiguracji Webpacka - aby ten mógł poprawnie te style rozumieć).

import './scss/main.scss' do main.js jednak zwraca mi błąd Module not found: Error: Can't resolve './scss/main.scss' in 'C:\Users\Rafał\Desktop\portfolio\js'
@ ./js/main.js 17:0-27, a do tego jak mam sprawdzić w pliku wynikowym czy działa babel jak tutaj chaos jest ;D

jednak zwraca mi błąd Module not found: (...)

Jaki masz układ katalogów?

Ok źle podlinkowałem import zamiast ../ dałem ./ ale jeszcze mam problem ze zdjęciami ponieważ samego scss nie wywala błędów tylko odniesienie jest do zdjęć w folderze images/

Skąd mogę wiedzieć, co jest przyczyną błędu, skoro nie podałeś zawartości tego Twojego pliku?

Chodzi ci o plik main.scss ?

Tak.

Wiesz co w main mam po prostu importy do plików w których daję background: url() i pewnie o te zdjęcia chodzi. Łatwiej będzie jak ci dam gita do tego https://github.com/Raloseq/Portfolio/tree/master/scss.

https://github.com/postcss/postcss-loader/issues/160#issuecomment-271082726

Co sądzisz o tym zapisie ? Bo tak samo w babelu miałem i mi nie wywalało błędu o API schema ? edit: poczytałem i muszę url-loader zainstalować jak webpack'a w wersji 4 korzystam. Dobra już nie wiem co mu nie pasuje masz jakiś pomysł ? Dodałem plik z błędem.

{
                test: /\.(scss|sass)$/,
                use: {
                    loader: ['style-loader', 'css-loader', 'sass-loader'],
                    options: {
                        url: false
                    }
                }
            }

Zamieniłem na coś takiego i przeszło tylko teraz mu coś nie pasuje w samym pliku scss proste postifion: fixed i width 100%; Kurcze wiedziałem , że to będzie ciężki orzech do zgryzienia ale , że aż tak :D

{
                test: /\.(scss|sass)$/,
                use: [{
                    loader: 'style-loader',
                    loader: 'css-loader',
                    loader: 'sass-loader',
                    options: {
                        url: false
                    }
                }]
            }

To:

{
    loader: 'style-loader',
    loader: 'css-loader',
    loader: 'sass-loader',
    options: {
        url: false
    }
}

... jest efektywnie tym samym co:

{
    loader: 'sass-loader',
    options: {
        url: false
    }
}

(powtarzające się klucze w ramach jednego obiektu)

Gdybyś spojrzał do dokumentacji, odnalazłbyś przykłady wykorzystania wielu loaderów oraz ich odrębnej konfiguracji.

Ok to zobacz 2 posty wyżej i co mu śmierdzi jak tam jest poprawnie a i tak błąd wywala o składnię

Raz jeszcze proszę Cię o spojrzenie do dokumentacji; porównaj sobie Twój kod:

                use: {
                    loader: ['style-loader', 'css-loader', 'sass-loader'],
                    options: {
                        url: false
                    }
                }

... z tym, co sugeruje dokumentacja:

        use: [
          { loader: ['style-loader'](/loaders/style-loader) },
          {
            loader: ['css-loader'](/loaders/css-loader),
            options: {
              modules: true
            }
          },
          { loader: ['sass-loader'](/loaders/sass-loader) }
        ]

Ok sprawdzę jak wrócę do domu ale dziwne , że tak trzeba rozbijać zazwyczaj na poradnik widzę , że w jendym te wszystkie sassowskie loadery się daje

Ok zrobiłem tak jak jest w dokumentacji jednak wywala błąd o reg expie , próbowałem szukać problemu jednak nie mogłem znaleźć.

Zdaje się, że mają drobny błąd - zamiast ['style-loader'](/loaders/style-loader) powinno być samo 'style-loader' (autorzy próbowali zrobić link w stylu markdowna, lecz nie wyszło).

Ok przeszło tylko teraz jak to jest, że style mi się wrzuciły do main.bundle.js, podlinkowany jest na końcu indexu.html a się nie wczytują ?

Co to znaczy style mi się wrzuciły do main.bundle.js?

Jak wrzuciłem import do main.js to webpack je zminifikował i wrzucił do main.bundle.js tylko, że teraz ta js'owa sekcja się nie podświetla więc coś chyba schrzaniłem.

Co to znaczy tylko, że teraz ta js'owa sekcja się nie podświetla?

To, że przed importowanie scss'a sekcja js(obrazek) miała "kolorki"(nie wiem jak to nazwać) a teraz jest wszystko na biało.