Webpack - jak poprawnie kompilować ES6 z React

0

Próbuje sobie skompilować pliki ReactJS w Webpacku lecz on nie widzi poszczególnych modułów. Prosze o rady. W załączniku wrzucam screen z debbuga, natomiast poniżej kod:
webpackconfig:

var path = require('path');
var webpack = require('webpack');

module.exports = {
 
    output: {
      path: path.join(__dirname,"build"),
      filename: 'bundle.js'
    },

    entry: ['./src/App.jsx'],

   plugins: [
        // Avoid publishing files when compilation fails
        new webpack.NoErrorsPlugin()
    ],
    stats: {
        // Nice colored output
        colors: true
    },
    devtool: 'source-map',

    resolve: {
      extensions: ['','.js', '.jsx']
    },

    module: {
     
      loaders: [
      
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: 'babel', // 'babel-loader' is also a legal name to reference
          query: {
            presets: ['react', 'es2015']
          }
         },
         
      ]
      
    }
};

App.jsx:

import React from 'react';
import {Router, Route, IndexRoute, Redirect} from 'react-router';
import DefaultLayout from './layouts/Default';
import HomePage from './components/Home';
import PrivacyPage from './components/Privacy';


export const routes = (
    <Route path='/' component={DefaultLayout}>
        <IndexRoute component={HomePage} />
        <Route path='privacy' component={PrivacyPage} />
        <Route path='*' component={NotFound} />
    </Route>
)
0

Z konsoli wynika, że podales źle ścieżki do modułów w pliku jsx. Konfig webpacka być może jest ok.

0
Maciej Cąderek napisał(a):

Z konsoli wynika, że podales źle ścieżki do modułów w pliku jsx. Konfig webpacka być może jest ok.

Poniżej wrzucam strukture projektu, chyba że nie do końca rozumiem importowanie:) Jak to powinno być poprawnie?

0

W webpack.js:
zamiast:
entry: ['./src/App.jsx']
ma być:
entry: ['../src/App.jsx']

0

@Maciej Cąderek przy takim rozwiązaniu dostaje błąd:

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' ../src/App.jsx in C:\Users\My Comp\Desktop\reactElectronProject
 @ multi main
1

Odpal webpacka z flagą:
webpack --display-error-details
i zobacz gdzie szuka.

0

Sporo tego wylistował:

Version: webpack 1.12.14
Time: 46ms
Asset     Size  Chunks             Chunk Names
 main  1.59 kB       0  [emitted]  main
   [0] multi main 40 bytes {0} [built] [2 errors]

ERROR in multi main
Module not found: Error: Cannot resolve module 'entry' in C:\Users\comp\Desktop\reactElectronProject
resolve module entry in C:\Users\comp\Desktop\reactElectronProject
  looking for modules in C:\Users\comp\Desktop\reactElectronProject\node_modules
    C:\Users\comp\Desktop\reactElectronProject\node_modules\entry doesn't exist (module as directory)
    resolve 'file' entry in C:\Users\comp\Desktop\reactElectronProject\node_modules
      resolve file
        C:\Users\comp\Desktop\reactElectronProject\node_modules\entry doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.webpack.js doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.js doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.json doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.web.js doesn't exist
[C:\Users\comp\Desktop\reactElectronProject\node_modules\entry]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\entry]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.webpack.js]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.js]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.json]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.web.js]
 @ multi main

ERROR in multi main
Module not found: Error: Cannot resolve module '@multi' in C:\Users\comp\Desktop\reactElectronProject
resolve module @multi in C:\Users\comp\Desktop\reactElectronProject
  looking for modules in C:\Users\comp\Desktop\reactElectronProject\node_modules
    C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi doesn't exist (module as directory)
    resolve 'file' @multi in C:\Users\comp\Desktop\reactElectronProject\node_modules
      resolve file
        C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.webpack.js doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.web.js doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.js doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.json doesn't exist
[C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.webpack.js]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.web.js]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.js]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.json]
 @ multi main
1

ścieżki w App.jsx są niepoprawne, przykładowo

jest
import PrivacyPage from './components/Privacy';
powinno być
import PrivacyPage from './pages/Privacy';
0

Oki, poradziłem sobie, problem leżał faktycznie w ścieżkach importowania plików:)

1 użytkowników online, w tym zalogowanych: 0, gości: 1