如何使用 webpack 开发服务器在 webpack 配置中设置 browserslist

Question

我正在尝试在 webpack 配置文件中设置 browserslist 但不知道如何执行此操作。

在 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' ],
                }
            },
        ],
      },
    ],
  }
};

在入口文件中添加polyfil：

import '@babel/polyfill';

在.browserslistrc中

ie 11

在 IE 11 中打开该网站并收到错误，因为const someFunction = (fn, offset) =>是语法错误。

webpack 配置由开发服务器使用，因为如果我其中有一些无效值，开发服务器将无法构建。

Answer 1

对于 Quasar 应用程序，只需更改 package.json 中的条目即可。例如，我在设置 Quasar 应用程序时选择了 IE 支持，它为我创建了此条目：

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

当我更改为这一点并重新启动（尝试热重载，但出现错误）时，代码重写较少：

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

但是，根据https://www.npmjs.com/package/browserslist您在 .browserslistrc 中的条目应该有效（并且浏览器名称不区分大小写）。所以我猜它不在正确的位置，或者没有设置为可供阅读。确认这一点的一种方法是将“unknown-browser”放入列表中，现在 webpack/babel 会生成一个投诉。也就是说，如果您没有收到投诉，您就知道您的文件被忽略。