我在这里发疯了 - 我似乎无法让我的路线分开工作:这是我的配置/代码(只有相关部分)
不确定它是否与我的babel配置有关。那就是我所有的转变都在发生的地方。
我正在使用React Router 4和Webpack 2
.babelrc:
"env": {
"development": {
"plugins": [
"transform-async-to-generator",
"transform-decorators-legacy",
"transform-regenerator",
"transform-object-rest-spread",
"syntax-dynamic-import",
"dynamic-import-node-sync",
"system-import-transformer",
["import-inspector", {
"serverSideRequirePath": true,
"webpackRequireWeakId": true
}]
],
"presets": ["latest", "stage-2", "react"]
}.......
的WebPack
entry: ['babel-polyfill', './src/Client/browser-client.js'],
output: {
path: path.resolve(projectPath, 'dist', 'public', 'js'),
filename: 'client[name].js',
chunkFilename: '[name]chunk.js',
},
...
plugins: [
new webpack.optimize.CommonsChunkPlugin({
children: true,
async: true,
minChunks: ({ resource }) => /node_modules/.test(resource),
}),
]......
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
}
......
组件
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom'
import Loadable from 'react-loadable';
const HelloWorld = Loadable({
loader: () => import('./../../Containers/HelloWorld'),
loading: () => (<div>Loading</div>)
});
const Help = Loadable({
loader: () => import('./../../Containers/Help'),
loading: () => (<div>Loading</div>)
});
export default class routes extends React.Component {
render() {
return (
<div>
<Route exact path="/client/hello" component={HelloWorld}/>
<Route exact path="/client/help" component={Help}/>
</div>
);
}
}
输出
Asset Size Chunks Chunk Names
client.main.js 322 kB 0 [emitted] [big] main
client.main.js.map 111 bytes 0 [emitted] main
任何帮助/暗示赞赏!!!!! :/