7
Edit2：編輯正則表達式來匹配窗口的文件路徑，現在正在進行代碼分割。但是我的孩子組件仍然無法加載。我的代碼自上週以來發生了變化，但我仍然停留在這個問題上（我需要以聲明方式聲明我的路由，所以使用JSX）。首先，我將Webpack 1.x與React，react-router，bundle-loader，Babel6，ES6和airbnb-eslint-config一起使用。使用webpack隱式分割代碼，bundle-loader react-router
我根據React's huge app example根據Henley Edition's article關於代碼拆分和加載塊（及其example repo）嘗試。
但我不能設法讓bundle-loader拆我的代碼成塊......
這裏是我的代碼：
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;
客戶機/ 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;
公共/ src目錄/視圖/索引/ JS/Index.js
import React from 'react';
const Index =() => (
<h2>Index Page</h2>
);
export default Index;
公共/ src目錄/視圖/登錄/ 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
見，無捆綁:(如果我深知，在webpack.config.js第三裝載機應注意在.js文件導入的文件，並讓他們到chunks，所以他們可能是加載dynamically (and lazily)。
此外，我的網頁不加載。如果我拿出代碼分裂出來的圖片，它的工作原理：
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'));
但是，我的應用程序會是巨大的，我絕對需要的代碼分裂。
請問有人能給我一點見解嗎？
在此先感謝！
您好，感謝，但我只有一個的WebPack。 config.js文件...無論如何我都試過，但沒有運氣。我已經採用了原來React的巨大應用示例，因爲無論如何，謝謝！ – Zephir77167
你好。我別無選擇，只能實現你的方式到我的代碼中（這很酷，因爲我喜歡JSX的聲明方式）。我更新了我的代碼，請你看看？非常感謝！ – Zephir77167