Internet Explorer 10以下でReact、WebPack、BabelがSCRIPT1002を生成します。構文エラー

Question

同様の問題に関して複数のスレッドを読み、いくつかの命題を試しましたが、結果はありませんでした。

私はReact.jsとWebPACKの3に関連するいくつかのチュートリアルに従ってきました。結果として、アプリケーションはIE 10以下を除いて、すべてのブラウザ（この時点で）でうまくいきます。 bundle.jsにエラーポイント（私は設定Nr.1を使用していたら）：
SCRIPT1002: Syntax errorとライン - コンフィギュレーションNR2でconst url = __webpack_require__(83);

、ローカルサーバー上 - ：SCRIPT1002: Syntax errorからeval() ととライン同じ構成が、リモート・サーバ上で実行すると、ビットの異なるエラー生成：

SCRIPT5009: 'Set' is undefine

WebPACKの構成NR1：

を

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: './index.html', 
    filename: 'index.html', 
    inject: 'body' 
}) 
module.exports = { 
    entry: './index.js', 
    output: { 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.json$/, 
     exclude: /node_modules/, 
     loader: 'json-loader' 
     }, 
     { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
     } 
    ], 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /(node_modules)/,  
     use: { 
      loader: 'babel-loader', 
      options: { 
      presets: ['env', 'react'] 
      } 
     } 
     } 
    ] 
}, 
    devServer: { 
     historyApiFallback: true, 
     contentBase: './' 
    }, 
plugins: [HtmlWebpackPluginConfig] 
} 

WebPACKの構成NR2：

const path = require('path'); 
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const PreloadWebpackPlugin = require('preload-webpack-plugin'); 
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); 
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin'); 
const CompressionPlugin = require('compression-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 

const staticSourcePath = path.join(__dirname, 'static'); 
const sourcePath = path.join(__dirname); 
const buildPath = path.join(__dirname, 'dist'); 

module.exports = { 
    stats: { 
     warnings: false 
    }, 
    devtool: 'cheap-eval-source-map', 
      devServer: {  
      historyApiFallback: true, 
      contentBase: './' 
     }, 
    entry: { 
     app: path.resolve(sourcePath, 'index.js') 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: '[name].[chunkhash].js', 
     publicPath: '/' 
    }, 
    resolve: { 
     extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'], 
     modules: [ 
      sourcePath, 
      path.resolve(__dirname, 'node_modules') 
     ] 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify('production') 
     }), 
     new webpack.optimize.ModuleConcatenationPlugin(), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      filename: 'vendor.[chunkhash].js', 
      minChunks: Infinity 
     }), 
     new webpack.LoaderOptionsPlugin({ 
      options: { 
       postcss: [ 
        autoprefixer({ 
         browsers: [ 
          'last 3 version', 
          'ie >= 10' 
         ] 
        }) 
       ], 
       context: staticSourcePath 
      } 
     }), 
     new webpack.HashedModuleIdsPlugin(), 
     new HtmlWebpackPlugin({ 
      template: path.join(__dirname, 'index.html'), 
      path: buildPath, 
      excludeChunks: ['base'], 
      filename: 'index.html', 
      minify: { 
       collapseWhitespace: true, 
       collapseInlineTagWhitespace: true, 
       removeComments: true, 
       removeRedundantAttributes: true 
      } 
     }), 
     new PreloadWebpackPlugin({ 
      rel: 'preload', 
      as: 'script', 
      include: 'all', 
      fileBlacklist: [/\.(css|map)$/, /base?.+/] 
     }), 
     new webpack.NoEmitOnErrorsPlugin(), 
     new CompressionPlugin({ 
      asset: '[path].gz[query]', 
      algorithm: 'gzip', 
      test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/, 
      threshold: 10240, 
      minRatio: 0.8 
     })  
    ], 
    module: { 
     rules: [ 
      { 
       test: /\.(js|jsx)$/, 
       exclude: /node_modules/, 
       use: { 
        loader: 'babel-loader', 
        options: { 
        presets: ['env', 'react', 'es2015'], 
        plugins: ["transform-es2015-arrow-functions"] 
        } 
       }, 
       include: sourcePath 
      }, 
      {     
       test: /\.css$/, 
       exclude: /node_modules/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: [ 
         { loader: 'css-loader', options: { minimize: true } }, 
         'postcss-loader', 
         'sass-loader' 
        ] 
       }) 
      }, 
      { 
       test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/, 
       use: 'file-loader?name=assets/[name]-[hash].[ext]' 
      }, 
      { 
       test: /\.(png|gif|jpg|svg)$/, 
       use: [ 
        'url-loader?limit=20480&name=assets/[name]-[hash].[ext]' 
       ], 
       include: staticSourcePath 
      } 
     ] 
    } 
}; 

ここでさらに私は、プリセットにes2015追加しました：['env', 'react', 'es2015']とplugins: ["transform-es2015-arrow-functions"]を、それは何の意味を成しません。

バベルローダーが誤った設定や何か他のところで動作しない場合は、アプリケーション全体が起動しないと思います。 >const ansiHTML = require('ansi-html');

Answer 1

- 私はinline-cheap-module-source-mapにdevtoolを変更してoverlay.jsするエラーポイントを持っている経験豊富な開発者からのアドバイスが必要

UPDATE ...何かがプリセットまたはその順序で行われるべきであると信じていますあなたのpackage.jsonファイルバージョンへ

変更のWebPACK-devのサーバーのバージョンを "2.7.1"（またはそれ以前）で。

"webpack-dev-server": "2.7.1" 

はその後らほらをNPMをインストールします。

それは私にとって問題を解決しました。

2.7.1より後のすべてのバージョンで私のあなたと似たようなエラーが表示されます。