Webpack babel-loaderが.babelrc（旧式のブラウザをサポート）を読み取っていません

Question

babelを単独で実行すると、.babelrcとtranspilesが予想どおりに読み込まれます。しかし、babel-loaderでwebpackを実行すると、出力されるコードは元のコードと非常によく似ていますが、古いブラウザでは動作します。

.babelrc

{ 
    "presets": ["env"] 
} 

webpack.config.js

module.exports = { 
    entry: __dirname + '/src/index.js', 
    output: { 
     filename: 'bundle.js', 
     publicPath: '/dist', 
     path: __dirname + '/dist' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js?/, 
       include: __dirname + 'src', 
       loader: 'babel-loader' 
      } 
     ] 
    }, 
    devServer: { 
     inline: true, 
     port: 8080, 
     historyApiFallback: { 
      index: 'index.html' 
     } 
    } 
} 

Answer 1

はwebpack.config.jsを編集し、.babelrcを除去します。

https://webpack.js.org/loaders/babel-loader/

webpack.config.js

module.exports = { 
    entry: __dirname + '/src/index.js', 
    output: { 
     filename: 'bundle.js', 
     publicPath: '/dist', 
     path: __dirname + '/dist' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       use: { 
        loader: 'babel-loader', 
        options: { 
         presets: ['env'] 
        } 
       } 
      } 
     ] 
    }, 
    devServer: { 
     inline: true, 
     port: 8080, 
     historyApiFallback: { 
      index: 'index.html' 
     } 
    } 
} 

Answer 2

私は同様の問題に直面し、それは私が見つけたものです。 .babelrc

{ 
    "presets": [ 
    ["env", { 
     "targets": { 
     "browsers": ["last 2 versions", "IE >= 8"] 
     }, 
     "debug": true 
    }] 
    ] 
} 

にdebugオプションを設定することを示しているbrowsering作品：

ターゲットを使用した：{ "クロム"、 "61"、 "アンドロイド"： "4.4.3"、 "エッジ" ： "15" は、 "Firefoxの"： "56"、 "IE"： "8"、 "IOS"： "10.3"、 "サファリ"： "10.1"}

モジュール変換：commonjs

を

プラグインの使用：check-es2015-co
transform-es2015-arrow-function {"アンドロイド"： "4.4.3"、 "ie"： "8"}
transform-es2015-block-scoped-functions {"android"： "4.4.3"、 "ie"： "8"}
transform-es2015-block-scoping {"android"： "4.4.3"、 "ie" "：" 8 "}
transform-es2015-class {" android "：" 4.4.3 "、" ie "：" 8 "}
transform-es2015-computed-properties {" android "：" 4.4.3 "、" ie "：" 8 "}
transform-es2015-destructuring {" android "：" 4.4.3 "、" edge "：" 15 "、" ie "：" 8 "}
transform-es2015 -duplicate-keys {"android"： "4.4.3"、 "ie"： "8"}
{"アンドロイド"： "4.4.3"、 "4.4.3"、 "4.4.3"、 "4.4.3"、 "4.4.3"、 "4.4.3"、 " ： "15" は、 "すなわち"： "8"} ...

私のWebPACKの設定はちょうど

module: { 
    rules: [ 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader' 
    } 
} 

に見えるしかし、それはすべての問題を解決しません。蒸散分布を調べると、私はArray.prototype.reduceのpolyfillのようないくつかの予想されるものを見つけることができませんでした。IE 8のためにpolyfilledされるべきです。しかし、その考え方は、babel-core transpilerの責任ではないということです。そして、babel-polyfillまたはcore-jsを使用する必要があります。Webpack構成でのポリ充てんは別々の作業で、にbrowsersオプションを設定することはちょっとした話です。

GitHubおよびStackOverflowの関連トピックも参照してください。