WebPack nie może znaleźć modułu jeśli plik o nazwie JSX

Question

Kiedy piszę webpack.config.js jak ten

module.exports = { 
    entry: './index.jsx', 
    output: { 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['es2015', 'react'] 
     } 
    }] 
    } 
}; 

I index.jsx zaimportować moduł reactApp

import React from 'react'; 
import { render } from 'react-dom'; 

import App from './containers/App'; 

let rootElement = document.getElementById('box') 
render(
    <App />, 
    rootElement 
) 

znajdę, gdybym Aplikacja o nazwie modułu w App.jsx, następnie WebPack powie w index.jsx nie może znaleźć modułu App, ale jeśli nazwałem imieniem aplikację moduł w App.js, znajdzie ten moduł i działa dobrze.

Tak, jestem mylić o tym. W moim webpack.config.js napisałem test: /\.jsx?$/, aby sprawdzić plik, ale dlaczego nie można znaleźć nazwy *.jsx?

Answer 1

WebPACK nie wie rozwiązać .jsx plików niejawnie. Możesz określić rozszerzenie pliku w swojej aplikacji (import App from './containers/App.jsx';). Twój aktualny test ładujący mówi, że chcesz użyć programu ładującego Babel, gdy jawnie zaimportujesz plik z rozszerzeniem jsx.

lub można dołączyć .jsx w rozszerzeniach że WebPACK powinno rozwiązać bez wyraźnej deklaracji:

module.exports = { 
    entry: './index.jsx', 
    output: { 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['es2015', 'react'] 
     } 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'], 
    } 
}; 

Dla Webpack 2, pozostawić poza pustą rozszerzenie.

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

Answer 2

Dodając do powyższego odpowiedź

resolve nieruchomość jest gdzie trzeba dodać wszystkie typy plików, których używasz w swojej aplikacji.

Załóżmy, że chcesz używać .jsx lub .es6 pliki można szczęśliwie włączyć je tutaj i WebPack je rozwiązać:

resolve: { 
    extensions: ["", ".js", ".jsx" ".es6"] 
      } 

Jeśli dodać rozszerzenia w determinacji Właściwość, którą można usunąć z oświadczenia o imporcie:

import Hello from './hello';// Extensions removed 
import World from './world'; 

innych scenariuszy, jak jeśli chcesz coffeescript zostać wykryte należy skonfigurować Test nieruchomości jako dobrze jak:

// webpack.config.js 
module.exports = { 
    entry: './main.js', 
    output: { 
    filename: 'bundle.js'  
    }, 
    module: { 
    loaders: [ 
     { test: /\.coffee$/, loader: 'coffee-loader' }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    }, 
    resolve: { 
    // you can now require('file') instead of require('file.coffee') 
    extensions: ['', '.js', '.json', '.coffee'] 
    } 
}; 

Answer 3

Sprawdź, które bundle.js jest generowany bez błędów (Sprawdź Dziennik Runner zadań).

byłem coraz „nie może odnaleźć modułu, jeśli plik o nazwie JSX” ze względu na błąd składni w HTML w składniku uczynić funkcję.