在 webpack 中动态卸载模块/样式

Question

我必须根据登录页面和所有其他页面动态导入某些样式列表。 但是从登录页面导航到另一个页面时，我必须卸载引导样式，因为引导与 myStyle 冲突：

// if we are in landing page then load bootstrap otherwise load myStyle
 if (props.location.pathname === '/') {
    import(`./assets/css/bootstrap.css`);
  } else {
    import(`./assets/css/myStyle.css`);
  }

这是我迄今为止尝试过的，但它没有做任何事情。（由于风格冲突，我的主题崩溃了） 我想要的是一种在页面中完全动态卸载样式的方法。

 if (props.location.pathname === '/') {
    delete require.cache[require.resolve('./assets/css/myStyle.css')];
    import(`./assets/css/bootstrap.css`);
  } else {
    delete require.cache[require.resolve('./assets/css/bootstrap.css')];
    import(`./assets/css/myStyle.css`);
  }

Webpack 是否支持这样的场景？

Answer 1

请让我退后一步来澄清一下 webpack 的全部内容。它根据定义的入口点创建捆绑包。使用 import/require 声明，它收集创建此类捆绑包所需的所有文件（使用适当的加载器）。

现在，让我回到你的问题。您是说在某些情况下，取决于您需要或不需要引导的 URL 地址。

假设您没有使用 SPA，您可以在您需要（登陆）的页面和其他页面上独立加载 <script> 标签中的引导程序 - 不要。假设您正在创建 SPA - 我什至不知道如何完成您正在寻找的内容。请记住，在 webpack 做了这么多事情之后，我们得到了静态的 html + css + js 文件。

此外，我什至不太明白卸载的样子，我觉得您可能会考虑webpack-dev-server 和显然不应该在生产中使用的 HMR 东西。