webpack seem raise blank page on webview when android<4.4 - reactjs

Question

I use react-boilerplate-3.0 create a mobile project several months ago, and everything worked. But recently when our project is online, I found it not work on android webview when android version < 4.4.
I know android change webview kern after 4.4, so there are some compatibility issues.
I found some issues like
Page load blank on stock Galaxy S3 samsung Android browser
Blank screen, app not hooking into html
and I had fix those;
But there is still have some problem, there is two diff version code:
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'));
When I use npm run start, everything worked, But after I npm run build, my andy(with android 4.2) only work on R1。
So I guess maybe there's some bugs of webpack;
There's no any log been print;
Any tips will be taken seriously:)
Append:
I use "webpack": "2.1.0-beta.8" and "react": "15.0.1",and here is my webpack.config.js
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',
],
},
}