webpack non riesce a trovare il modulo se il file denominato JSX

Question

Mentre scrivo webpack.config.js come questo

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

E in index.jsx importare un modulo reactApp

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

import App from './containers/App'; 

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

trovo se ho nome modulo app in App.jsx, quindi il webpack dirà in index.jsx non può trovare il modulo App, ma se ho chiamato l'app modulo nome in App.js, troverà questo modulo e funzionerà bene.

Quindi, sono confuso a riguardo. Nel mio webpack.config.js, ho scritto test: /\.jsx?$/ per controllare il file, ma perché il nome *.jsx non è stato trovato?

Answer 1

Webpack non sa risolvere .jsx file in modo implicito. È possibile specificare un'estensione di file nell'app (import App from './containers/App.jsx';). Il tuo attuale test del caricatore dice di usare il caricatore babel quando importi in modo esplicito un file con l'estensione jsx.

o, è possibile includere .jsx nelle estensioni che WebPack dovrebbe risolvere senza dichiarazione esplicita:

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

Per Webpack 2, lasciare fuori l'estensione vuota.

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

Answer 2

Aggiungendo alla risposta di cui sopra,

Il determinazione proprietà è dove si deve aggiungere tutti i tipi di file che si sta utilizzando nella vostra applicazione.

Si supponga di voler utilizzare .jsx o .es6 file si può tranquillamente includerli qui e webpack li risolvere:

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

Se si aggiungono le estensioni nella determinazione proprietà è possibile rimuoverli dall'istruzione import:

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

Altri scenari come se si desidera lo script caffè per essere rilevato è necessario configurare il test proprietà così come:

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

Verificare, che bundle.js viene generato senza errori (controllare il Registro dei corridori delle attività).

Stavo ricevendo "impossibile trovare il modulo se il file ha chiamato jsx" a causa dell'errore di sintassi in html nella funzione di rendering del componente.