CODEWITHSUNDEEP
webpackbabeljswebpack-dev-server
HMR
HMR

Reputation: 39280

How to set browserslist in webpack config with webpack dev server

I am trying to set browserslist in the webpack config file but can't figure out how to do this.

Tried the following in webpack.config:

'use strict';

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        include: paths.appSrc,
        use: [
            {
                loader: 'babel-loader',
                query: {
                    presets: [ '@babel/preset-env','@babel/react' ],
                }
            },
        ],
      },
    ],
  }
};

Added polyfil in the entry file:

import '@babel/polyfill';

In .browserslistrc

ie 11

Opened the site in IE 11 and get an error because const someFunction = (fn, offset) => is a syntax error.

The webpack config is used by dev server because if I have some invalid values in there the dev server won't build.

Upvotes: 8

Views: 14612

Answers (1)

Darren Cook
Darren Cook

Reputation: 28928

In the case of a Quasar app, it is just a matter of changing an entry in package.json. E.g. I chose IE support when setting up the Quasar app, and it had created this entry for me:

"browserslist": [
    "last 1 version, not dead, ie >= 11"
  ]

When I change to this, and restart (hot reload tried, but gave an error), there is less rewriting of the code going on:

"browserslist": [
  "last 1 chrome version",
  "last 1 firefox version"
]

However, according to https://www.npmjs.com/package/browserslist your entry in .browserslistrc should have worked (and the browser names are case-insensitive). So I'd guess it is not in the right place, or not set up to be read. One way to confirm this is to put "unknown-browser" in the list and now webpack/babel generate a complaint. I.e. if you don't get the complaint, you know your file is being ignored.

Upvotes: 4

Related Questions