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

问题描述

我想弄清楚如何取消浏览器支持。让我们说例如 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 时也不需要模块

解决方法

那个插件会在你编译时运行......所以那时没有浏览器。

你可以做的一件事是在没有 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>