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配置

//这里的注释只标示了react-router按需加载需要更改的配置，其他的基本配置还需要自己理解哦 ^_^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'  //需要添加的配置，name会自动获取文件名    },    plugins:[      new webpack.optimize.CommonsChunkPlugin({        name: 'vendor',  //需要和entry的vendor配合使用        filename: 'vendor.js'  //生成的公共代码文件名      })    ],    module: {   //解析文件需要的loaders，根据自己需要配置      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() {        // console.log(this.props);        // this.props.route.childRoutes        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