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

Question

我正在尝试在 webpack 配置文件中设置浏览器列表，但不知道如何操作。

在 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。如果您没有收到投诉，则说明您的文件被忽略了。

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

How to set browserslist in webpack config with webpack dev server

webpack

babeljs

webpack-dev-server