J'ai utilisé Code Splitting for React Router pour charger le composant de manière asynchrone, et je l'ai fait avec succès. Mais lorsque j'ai ouvert ma page dans le navigateur, je n'ai rien obtenu. Voici quelques extraits de code clés :
routeConfig
// When i removed the annotation below, it did render !
// import Home from './containers/Home/Home'
const routeConfig = [
{
path: '/',
component: App,
//indexRoute: {
// component: Home
//}
getIndexRoute(location, callback) {
require.ensure([], (require) => {
callback(null, require('./containers/Home/Home'))
}, 'Home');
}
}];Accueil.jsx
console.log('HOME'); // It works!
class Home extends Component {
render() {
console.log('HOME COMPONENT'); // not working!
}
}Des idées ? Je suis coincé ici :(
Voici mes codes de configuration complets de webpack :
/**
* webpack config
*/
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
vendor: [
'react',
'react-dom',
'redux',
'react-redux',
'react-router',
'redux-logger',
'redux-thunk'
],
main: [
'./html/index'
]
},
output: {
// path: path.join(__dirname, 'html/dist'),
path: './html/dist',
publicPath: '/html/dist/',
filename: '[name].js',
chunkFilename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.js|jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
plugins: ['transform-object-rest-spread'],
presets: ['react', 'es2015']
}
},
{
test: /\.less$/,
exclude: /(node_modules|bower_components)/,
loader: "style!css!less"
}
]
},
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
// 'react': 'React',
// 'react-dom': 'ReactDOM',
// 'redux': 'Redux',
// 'react-redux': 'ReactRedux',
// 'react-router': 'ReactRouter',
// 'redux-logger': 'reduxLogger',
// 'redux-thunk': 'ReduxThunk'
},
// add this handful of plugins that optimize the build
// when we're in production
plugins: process.env.NODE_ENV === 'production' ? [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin()
] : [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: 'vendor'
})
]
};J'espère que cela vous aidera.
Home.js a bien été chargé, mais le composant Home semble ne pas être initialisé.
