2016-08-11 3 views
0

J'essaie de regrouper et de server une petite application que j'ai sur un serveur de développement webpack. Jusqu'à présent, il a été bon, mais il semble être incapable de localiser mes fichiers jsx. J'ai un index dans chacun de mes réagiront dossiers intelligents de composants qui ressemble à ceci:Webpack impossible de trouver les fichiers jsx

import Component from './component'; 
import container from './container'; 
import reducers from './reducers'; 

export default { 
    Component, 
    container, 
    Container: container(), 
    reducers 
}; 

Webpack se plaint lorsque je tente de lancer le paquet et en disant

client:47 ./client/ux-demo/index.js 
Module not found: Error: Cannot resolve 'file' or 'directory' ./component in /Users/me/projects/ux-demo/client/ux-demo 

résolution fichier

Le seule vraie différence est que c'est un fichier jsx, plutôt qu'un fichier js, mais j'ai babel-loader en place.

Voici mon fichier webpack.config

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

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/only-dev-server', 
    './client/app.jsx' 
    ], 
    output: { 
    path: path.join(__dirname, 'client'), 
    filename: 'bundle.js', 
    publicPath: '/client/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
    ], 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     loaders: ['react-hot', 'babel-loader'], 
     include: path.join(__dirname, 'client') 
    }, { 
     test: /\.jsx$/, 
     loaders: ['react-hot', 'babel-loader'], 
     include: path.join(__dirname, 'client') 
    }] 
    } 
}; 

Pas sûr ce que je fais mal ici, merci!

+1

En aparté: aucune raison pour laquelle vous avez deux chargeurs qui ne diffèrent que par un personnage? Vous pouvez les combiner en utilisant la correspondance '/ \. Jsx? $ /' (Correspondant à la fois '.js' et' .jsx'). – robertklep

Répondre

2

Vous devez dire webpack que résoudre les fichiers .jsx également

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