编辑2:编辑正则表达式以匹配窗口的文件路径，并且代码分割现在正在发生。但我的根路由的子组件仍然无法加载。
编辑:自上周以来我的代码已更改，但我仍然陷入该问题(并且我需要以声明方式声明我的路线，因此使用 JSX)。
首先，我将 Webpack 1.x 与 React、react-router、bundle-loader、Babel6、ES6 和 airbnb-eslint-config 结合使用。
我尝试关注Henley Edition's article关于代码分割和加载 block (及其 example repo )，基于 React's huge app example .
但我没能成功 bundle-loader将我的代码分成 block ...
这是我的代码:
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const nodeDir = `${__dirname}/node_modules`;
const routeComponentRegex = /src[\/\\]views[\/\\]([^\/\\]+)[\/\\]js[\/\\]([^\/\\]+).js$/;
const paths = [ // Only to test which files match the regex, juste in case
'src/views/index/js/Index.js',
'src/views/login-page/js/LoginForm.js',
'src/common/main-content/js/MainContent.js',
'src/routes/main.js',
];
console.log(routeComponentRegex.test(paths[0])); // prints 'true'
console.log(routeComponentRegex.test(paths[1])); // prints 'true'
console.log(routeComponentRegex.test(paths[2])); // prints 'false'
console.log(routeComponentRegex.test(paths[3])); // prints 'false'
const config = {
resolve: {
alias: {
react: `${nodeDir}/react`,
'react-dom': `${nodeDir}/react-dom`,
'react-router': `${nodeDir}/react-router`,
'react-fetch': `${nodeDir}/react-fetch`,
'react-cookie': `${nodeDir}/react-cookie`,
'react-bootstrap': `${nodeDir}/react-bootstrap`,
'react-bootstrap-daterangepicker': `${nodeDir}/react-bootstrap-daterangepicker`,
'react-bootstrap-datetimepicker': `${nodeDir}/react-bootstrap-datetimepicker`,
velocity: `${nodeDir}/velocity-animate`,
moment: `${nodeDir}/moment`,
slimscroll: `${nodeDir}/slimscroll`,
},
},
entry: {
app: './client/src/routes/js/main',
vendors: [
'react', 'react-dom',
'react-router', 'react-fetch', 'react-cookie',
'react-bootstrap', 'react-bootstrap-daterangepicker', 'react-bootstrap-datetimepicker',
'velocity', 'moment', 'slimscroll',
],
},
output: {
path: path.join(__dirname, 'public/dist'),
publicPath: '/dist/',
filename: 'bundles/[name].bundle.js',
chunkFilename: 'chunks/[name].chunk.js',
},
module: {
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, 'client'),
exclude: routeComponentRegex,
loader: 'babel',
},
{
test: /\.css$/,
include: path.join(__dirname, 'client'),
exclude: routeComponentRegex,
loader: 'style!css-loader?modules&importLoaders=1' +
'&localIdentName=[name]__[local]___[hash:base64:5]',
},
{
test: routeComponentRegex,
include: path.join(__dirname, 'client'),
loaders: ['bundle?lazy', 'babel'],
},
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendors', 'bundles/vendors.js', Infinity),
],
};
module.exports = config;
client/src/views/main-content/js/MainContent.js
import React from 'react';
import { Link } from 'react-router';
const MainContent = (props) => (
<div>
<h1>App</h1>
<ul>
<li><Link to="/login">Login</Link></li>
</ul>
{props.children}
</div>
);
MainContent.propTypes = {
children: React.PropTypes.node.isRequired,
};
export default MainContent;
public/src/views/index/js/Index.js
import React from 'react';
const Index = () => (
<h2>Index Page</h2>
);
export default Index;
public/src/views/login/js/Login.js
import React from 'react';
const LoginForm = () => (
<div className="box box-default">
<h2>Login Page</h2>
</div>
);
export default LoginForm;
入口点(client/src/routes/main.js):
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import MainContent from '../../common/main-content/js/MainContent';
// modules supposed to be loaded lazily
import Index from '../../views/index/js/Index';
import Login from '../../views/login/js/Login';
import ShortOffers from '../../views/short-offers/js/ShortOffers';
import CreateJobOffer from '../../views/create-job-offer/js/CreateJobOffer';
function lazyLoadComponent(lazyModule) {
return (location, cb) => {
lazyModule(module => {
cb(null, module);
});
};
}
function lazyLoadComponents(lazyModules) {
return (location, cb) => {
const moduleKeys = Object.keys(lazyModules);
const promises = moduleKeys.map(key =>
new Promise(resolve => lazyModules[key](resolve))
);
Promise.all(promises).then(modules => {
cb(null, modules.reduce((obj, module, i) => {
obj[moduleKeys[i]] = module;
return obj;
}, {}));
});
};
}
render((
<Router history={browserHistory}>
<Route path="/" component={MainContent}>
<IndexRoute getComponent={lazyLoadComponent(Index)} />
<Route path="short-offers" getComponent={lazyLoadComponent(ShortOffers)} />
<Route path="create-job-offer" getComponent={lazyLoadComponent(CreateJobOffer)} />
</Route>
<Route path="login" getComponent={lazyLoadComponent(Login)} />
</Router>
), document.getElementById('content'));
现在webpack的输出:
Hash: a885854f956aa8d2a00c
Version: webpack 1.13.0
Time: 6321ms
Asset Size Chunks Chunk Names
bundles/app.bundle.js 84.7 kB 0 [emitted] app
bundles/vendors.js 2.55 MB 1 [emitted] vendors
chunk {0} bundles/app.bundle.js (app) 89 kB {1} [rendered]
[0] multi app 28 bytes {0} [built]
+ 26 hidden modules
chunk {1} bundles/vendors.js (vendors) 2.45 MB [rendered]
[0] multi vendors 148 bytes {1} [built]
+ 626 hidden modules
看，没有 bundle :(如果我理解得很好，webpack.config.js 中的第三个加载器应该处理 .js 文件中导入的文件并将它们放入 block code>，因此可以动态(且延迟)加载它们。
此外，我的页面无法加载。如果我把代码从图片中取出来，它就可以工作:
render((
<Router history={browserHistory}>
<Route path="/" component={MainContent}>
<IndexRoute component={Index} />
<Route path="short-offers" getComponent={ShortOffers} />
<Route path="create-job-offer" getComponent={CreateJobOffer} />
</Route>
<Route path="login" getComponent={LoginPage} />
</Router>
), document.getElementById('content'));
但是，我的应用程序将会很大，我绝对需要代码分割。
有人可以给我一些见解吗？
提前致谢!
请您参考如下方法:
文章作者在这里。尝试仅运行 npm start (运行开发服务器)或 webpack -c webpack.config.js (将文件输出到 __build__ 目录)。我认为您只是忘记将 webpack 指向正确的配置文件。
