删除浏览器支持并使用 webpack 显示 html 页面答案

【问题标题】：Drop a browser support and show an html page with webpack删除浏览器支持并使用 webpack 显示 html 页面
【发布时间】：2021-08-25 17:28:01
【问题描述】：

我试图弄清楚如何放弃浏览器支持。例如 IE11，如何使用 webpack 执行此操作并防止它捆绑代码，因为它无论如何都会中断。并显示该浏览器的 UI（不支持浏览器...）。我遇到了浏览器列表，我知道它是用于浏览器选择的，但找不到使用它的解决方法。

假设我有一些实用功能 isIE11 可以检测浏览器，并且想做这样的事情：

{
  entry: isIE11 ? 'index.ie11.js' : 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: isIE11 ? 'src/ie11.index.html.hbs' : 'src/index.html.hbs'
      filename: 'assets/index.html'
    })
  ]
}

即使在 ie11 中显示这个简单的 UI 时不需要任何模块

【问题讨论】：

标签： javascript webpack bundle webpack-dev-server html-webpack-plugin

【解决方案1】：

该插件将在您编译时运行...所以此时没有浏览器。

您可以做的一件事可能是在没有 ie11 支持的情况下编译它（在 babel 配置中？）...然后在 html 页面中，将一个单独的脚本放在顶部的脚本标记中，以检查不受支持的浏览器，然后然后要么重定向你，要么只用消息替换当前页面：

<script>
if (... code to check browser) {
  window.location = "ie11.index.html";
}
// and then you have to deploy the ie11 index page
</script>

或者如果是短消息

<script>
if (... code to check browser) {
  document.getObjectById('main-div').innerHTML = 'Welcome to the ie version';
} else {
  // do what you normally do - put the real content into `main-div`
}
</script>

【讨论】：