React-Router-Redux部署至IIS出现空白页问题求助

我之前也碰到过类似的情况——资源明明加载成功了，但页面一片空白，浏览器控制台还没任何报错，排查起来确实有点摸不着头脑。结合你给出的技术栈和配置文件，我整理了几个最可能的问题点和对应的解决方案：

1. Webpack生产配置缺少主入口文件（最可能的原因） #

看你的prod.config.js，entry数组里只有babel-polyfill、bootstrap-loader这些依赖，但完全没引入你的应用主入口index.js！这就导致打包出来的bundle.js里根本没有你的React应用代码，自然不会渲染任何内容。

赶紧修改prod.config.js的entry配置，把你的主入口文件加进去（路径根据你的实际项目结构调整）：

entry: [
  "babel-polyfill",
  './src/index.js', // 加上这行！
  'bootstrap-loader',
  'bootstrap-loader/extractStyles'
],

2. SCSS Loader未正确配合ExtractTextPlugin工作 #

生产环境下你配置了ExtractTextPlugin来单独提取CSS，但你的scss loader还是用的style!css!postcss-loader!sass，这会把样式注入到JS文件里，而不是提取到bundle.css中，可能导致样式加载异常，甚至间接影响JS的正常执行。

修改prod.config.js里的scss loader配置：

module: {
  loaders: [{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!sass-loader')
  }],
},

3. 资源路径匹配问题 #

• 检查index.html里的资源路径：你用的是./dist/bundle.css和./dist/bundle.js，而webpack的publicPath是/dist/。如果你的应用部署在IIS的子目录下（比如localhost/MyApp），相对路径很可能会出错，建议改成绝对路径，或者根据部署环境动态调整publicPath。
• 另外，favicon的路径/src/images/favicon.png在生产环境下是无效的——src目录不会被打包到生产环境里，你需要把favicon放到dist目录下，然后修改路径为/dist/images/favicon.png。

4. React Router 3的BrowserHistory与IIS Rewrite规则验证 #

虽然你配置了IIS的rewrite规则，但可以先做个快速测试排查路由问题：把browserHistory换成hashHistory，重新打包部署，如果页面能正常显示，那说明是路由的history模式和IIS配置的适配问题。

修改index.js里的history配置：

import { Router, Redirect, hashHistory } from 'react-router';
// ...
const history = syncHistoryWithStore(hashHistory, store);

如果测试有效，再回头确认IIS的rewrite规则是否正确，确保所有非文件、非目录的请求都能重写到index.html。

5. 检查生产构建的bundle.js内容 #

最后，你可以直接打开部署后的bundle.js文件，搜索你的组件名称（比如MapContainer），如果搜不到，说明打包过程根本没把你的应用代码包含进去，那大概率是webpack入口配置的问题，回到第1点再确认。

内容的提问来源于stack exchange，提问作者its30