webpack - 如何使用 webpack 开发服务器在 webpack 配置中设置浏览器列表

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 生成一个投诉。 IE。如果您没有收到投诉，您就知道您的文件被忽略了。