Webpack konfiguracja babel + scss

0

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']
            }
        ]
    }
}

1

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

1

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?

0

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ć.

0

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

0

ES6 -> ES5 zainstalowałem wszystkie paczki potrzebne

0

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

0

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 ?

1

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ć).

0

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

0

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

Jaki masz układ katalogów?

0

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/

0

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

0

Chodzi ci o plik main.scss ?

0

Tak.

0

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.

0

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

0

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
                    }
                }
            }

0

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
                    }
                }]
            }

0

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.

0

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

1

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) }
        ]

0

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

0

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źć.

0

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).

0

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ą ?

0

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

0

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.