如何在Webpack配置中设置Browserslist和Webpack Dev Server？

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

在入口文件中添加了 polyfill：

import '@babel/polyfill';

在 .browserslistrc 文件中。

ie 11

使用IE 11打开网站，因为const someFunction = (fn, offset) =>是语法错误而出现错误。

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

- HMR

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将生成投诉。即如果您没有收到投诉，则知道文件被忽略了。

- Darren Cook