webpack+react-router按需加载入门
要理解此篇文章，需要有一定的webpack基础和react-router的基本功哦，废话不多说，下面就直接上代码讲解。
1、文件目录
2、react-router路由配置(index.js 文件)
//引入子路由文件，ensure函数为异步加载的函数
import App from
"./js/app";
const detailContainer = (location, cb) => {
require.ensure([],
require => {
cb(
null,
require(
'./js/detail').
default)
//使用es6语法的
export导出组件时，需加上 defalut
},
'detail')
}
//更改Router组件渲染函数
render((
<Router history={browserHistory}>
<Route path=
"/" component={App}>
<Route path=
"/detail" getComponent={detailContainer} />
</Route>
</Router>
),
document.getElementById(
'app'))
注意：首页组件尽量不要用异步方法引入，至少进入网页你得显示点内容吧；
3、主要webapck配置
config = {
entry: {
desktop: [
'babel-polyfill',path.resolve(__dirname,
'./src/index.js')],
vendor: [
'react',
'react-dom']
},
resolve: {
alias: {}
},
output: {
publicPath:
"/build/",
path: path.resolve(__dirname,
'build'),
filename:
'[name].js',
chunkFilename:
'[name].chunk.js'
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
name:
'vendor',
filename:
'vendor.js'
})
],
module: {
loaders: [{
test:
/\.jsx?$/,
loader: [
'babel'],
query: {
presets: [
'react',
'es2015' ,
'stage-0']
},
exclude:
/node_modules/
}, {
test:
/\.css$/,
loader:
'style!css'
}, {
test:
/\.less$/,
loader:
'style!css!less'
},{
test:
/\.(png|jpg|gif)$/,
loader:
'url-loader',
query: {
limit:
108192,
name:
'images/[name].[hash:8].[ext]'
}
}]
}
};
4、其他一些文件做的一些操作
inbox.js处理嵌套的路由
export
default class Inbox extends Component{
render() {
return (
<
div>
<ul>
<li><Link to=
"/">返回首页(xxxx)</Link></li>
{
this.props.route.childRoutes.map((item,i)=>{
return <li key={i}><Link to={
'/inbox/'+item.path}>{item.title}</Link></li>
})}
</ul>
{}
{
this.props.children}
</
div>
)
}
}
app.js首页显示的内容，并做了link路由处理
const App = React.createClass({
render() {
return (
<div>
<h1>Welcome to the app!
</h1>
<ul>
<li><Link to="/detail">详情页
</Link></li>
<li><Link to="/inbox">个人中心
</Link></li>
</ul>
{this.props.children}
</div>
)
}
})
export default App;
其他的页面都是正常的render页面了，没什么特殊的了
5、css问题
细心的博友可能会问，css文件怎么办？ 目前这个demo是把css文件给打包到自己的js文件内了，还没有找到方法把css单独打包出来也按需加载。 之前使用webpack的extract-text-webpack-plugin这个插件尝试分离出css，但是没有成功，欢迎大家给出宝贵的建议。 详细代码：https://github.com/theFrontCalf/webpack-react-router-demandOnLoad.git
