Webpack babel-loader isn't reading .babelrc (supporting old browsers)

user_4616986 0
Viewed 5523

When I run babel by itself it reads the .babelrc and transpiles as expected. However, when I run webpack with babel-loader, the outputted code is very similar to the original code, but I would like for it to work in older browsers.

.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'
        }
    }
}
babeljs babel-loader webpack javascript
3 Answers

I faced similar issue and that's what I found out. Setting up the debug option in .babelrc

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

shows that browsering works:

Using targets: { "chrome": "61", "android": "4.4.3", "edge": "15", "firefox": "56", "ie": "8", "ios": "10.3", "safari": "10.1" }

Modules transform: commonjs

Using plugins: check-es2015-constants {"android":"4.4.3","ie":"8"}
transform-es2015-arrow-functions {"android":"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-classes {"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"}
transform-es2015-for-of {"android":"4.4.3","ie":"8"}
transform-es2015-function-name {"android":"4.4.3","edge":"15","ie":"8"} ...

My webpack config looks just

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

But that does not solve all the problems. Investigating the transpiled distributive, I could not find some expected things like polyfill for Array.prototype.reduce that should be polyfilled for IE 8. But the idea is (as I can understand) that it is not the responsibility of the babel-core transpiler. And we need to use babel-polyfill or core-js. So polyfilling in a webpack configuration is a separate task and setting up browsers option in .babelrc is just a part the story.

See also related topics on the GitHub and on StackOverflow.

user_32119320

Edited the webpack.config.js and removed the .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'
        }
    }
}
user_46169860
Related