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

Question

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'
        }
    }
}

If I remember right, it should be `targets` directly without that `browsers` bit within. You can also have the browser definition at `.browserslistrc` to achieve the same result. — Juho Vepsäläinen, Nov 04 '17 at 04:42
Never mind. Just try `.browserslistrc`. It should pick it up. — Juho Vepsäläinen, Nov 04 '17 at 04:43
Also keep in mind that your current browser definition won’t include a lot of old browsers. If you want to support IE 11, you should include it there. — Juho Vepsäläinen, Nov 04 '17 at 04:45
@JuhoVepsäläinen webpack still isn't picking up the `.babelrc` even when I just use the `env` preset and no browserlist options — getmicah, Nov 04 '17 at 04:52
Where do you place webpack.config.js and .babelrc. And where do you run webpack? — Quoc-Anh Nguyen, Nov 04 '17 at 05:04
@imcvampire all at the root of the project. Both babel and webpack compile without errors, it just seems like webpack and babel-loader aren't using the `.babelrc` preset. And it didn't fix things when I put the babel config inside the `webpack.config.js`. — getmicah, Nov 04 '17 at 05:15
The same issue. But I'm sure that Webpack reads .babelrc, because if I change .babelrc content to `{"presets": []}` (remove preset), it doesn't transpile the sources at all and UglifyJs fails on arrow functions. But the question remains: **how to include polyfils for old browsers?** e.g IE 8... bablerc syntax `"presets": [["env", {"targets": { "browsers": ["IE >= 8"] }}]]` does not work. — dhilt, Nov 20 '17 at 03:03

score 0 · Answer 1 · answered Nov 20 '17 at 04:14

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.

score -1 · Answer 2 · answered Nov 04 '17 at 05:32

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'
        }
    }
}

in question, you define loaded inside `module.loaders [{...}]` and in the answer, you are using `module.rules[{...}]` , does both syntax do the same same thing!! — diEcho, Nov 20 '17 at 04:38
I guess `loaders` was v1 and `rules` is v2+. https://stackoverflow.com/questions/43002099/rules-vs-loaders-in-webpack-whats-the-difference — getmicah, Nov 21 '17 at 06:56

score -1 · Answer 3 · answered Mar 21 '18 at 11:59

-1

The fact is that babel-loader will find .babelrc file in the transpiled files directorty, not your project directory。 So you should write the babelrc with .babelrc file's path in the webpack.config.js file

answered Mar 21 '18 at 11:59

Wangqiaoqiao

1

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

3 Answers3