Reactjs 当android出现时，网页似乎会在webview上出现空白页<；4.4

我在几个月前创建了一个移动项目，一切都很顺利。但最近当我们的项目上线时，我发现当android版本<4.4时，它在android webview上无法工作

我知道安卓在4.4之后改变了webview内核，所以存在一些兼容性问题

我发现了一些问题，比如

我得把它们修好

但仍然存在一些问题，有两个不同版本的代码：

class AppR1 extends React.Component {...}
import AppR2 from './xxx.js';

const R1 = (<div><AppR1 /></div>)
const R2 = (<div><AppR2 /></div>)

ReactDOM.render(R2, document.getElementById('app'));

---

我也有同样的问题。你找到解决办法了吗？

const path = require('path');
const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var NODE_MODULES = path.resolve(ROOT_PATH, 'node_modules');
console.info('*'.repeat(50));
console.info(ROOT_PATH);
console.info('*'.repeat(50));

function isExternal(module) {
  var userRequest = module.userRequest;

  if (typeof userRequest !== 'string') {
    return false;
  }

  return userRequest.indexOf('bower_components') >= 0 ||
    userRequest.indexOf('node_modules') >= 0 ||
    userRequest.indexOf('libraries') >= 0;
}

module.exports = {
  entry: {
    common: ['react','react-dom','react-bootstrap','weishao'],
    app: [path.resolve(APP_PATH, 'app.js')]
  },
  output: {
    path: BUILD_PATH,
    filename: '[name].[hash].js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/, // Transform all .js files required somewhere with Babel
      loader: 'babel',
      exclude: /node_modules/,
      query: {
        presets: [
          require.resolve('babel-preset-es2015'),
          require.resolve('babel-preset-react'),
          require.resolve('babel-preset-stage-0'),
        ]}
    }, {
      // Transform our own .css files with PostCSS and CSS-modules
      test: /\.css$/,
      exclude: /node_modules/,
      loader: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
      //loader: 'style-loader!css-loader?!postcss-loader',
    }, {
      test: /\.scss$/,
      exclude: /node_modules/,
      // loaders:ExtractTextPlugin.extract('style','css','sass')
      loaders: ['style', 'css', 'sass','postcss'],
    }, {
      // Do not transform vendor's CSS with CSS-modules
      // The point is that they remain in global scope.
      // Since we require these CSS files in our JS or CSS files,
      // they will be a part of our compilation either way.
      // So, no need for ExtractTextPlugin here.
      test: /\.css$/,
      include: /node_modules/,
      loaders: ['style-loader', 'css-loader'],
    }, {
      test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
      loader: 'url-loader?name=/images/[hash].[ext]&limit=10000',
      //loader: 'file?name=/img/[name].[ext]&limit=10000'
    }, {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file?name=fonts/[name].[hash].[ext]&mimetype=application/font-woff',
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file?name=fonts/[name].[hash].[ext]&mimetype=application/font-woff',
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file?name=fonts/[name].[hash].[ext]&mimetype=application/octet-stream',
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file?name=fonts/[name].[hash].[ext]',
    }, {
      test: /\.html$/,
      loader: 'html-loader',
    }, {
      test: /\.json$/,
      loader: 'json-loader',
    }],
  },

  plugins: [
    /*
    new webpack.ProvidePlugin({
      // make fetch available
      fetch: 'exports?self.fetch!whatwg-fetch',
    }),
    */

    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
    // inside your code for any environment checks; UglifyJS will automatically
    // drop any unreachable code.
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
    new webpack.optimize.OccurrenceOrderPlugin(true),

    // Merge all duplicate modules
    new webpack.optimize.DedupePlugin(),

    // Minify and optimize the JavaScript
    /*
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false, // ...but do not show warnings in the console (there is a lot of them)
      },
    }),
    */
    //simple copy
    new CopyWebpackPlugin([
      { from: require.resolve('weishao/src/static/loading.js'), to: 'loading.js' },
      { from: require.resolve('weishao/src/static/loading.css'), to: 'loading.css' },
      { from: require.resolve('weishao/src/static/loading.png'), to: 'loading.png' },
      { from: require.resolve('weishao/src/whistle.js'), to: 'whistle.js' },
    ]),
/*
    new webpack.DllPlugin({
      path: path.join(__dirname,'dist','[name]-manifest.json'),
      name: '[name]_library'
    }),
*/
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks: function(module, count) {
        return !isExternal(module) && count >= 2; // adjustable cond
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      chunks: ['common'],
      // or if you have an key value object for your entries
      // chunks: Object.keys(entry).concat('common')
      minChunks: function(module) {
        return isExternal(module);
      }
    }),
    /*
    new webpack.optimize.MinChunkSizePlugin({
      minChunkSize: 1024*1000
    }),
    */

    new HtmlWebpackPlugin({
      template: 'app/index.html',
      minify: {
        removeComments: false,
        collapseWhitespace: false,
        removeRedundantAttributes: false,
        useShortDoctype: false,
        removeEmptyAttributes: false,
        removeStyleLinkTypeAttributes: false,
        keepClosingSlash: false,
        minifyJS: false,
        minifyCSS: false,
        minifyURLs: false,
      },
      inject: true
    })
  ],

  resolve: {
    modules: ['app', 'node_modules'],
    extensions: [
      '',
      '.js',
      '.jsx',
      '.react.js',
    ],
  },
}