如果在同一页面中已存在另一个样式化组件实例，如何更改样式化组件的webpack配置？

Question

我正在使用React UI模块，该模块使用样式化组件，用于页面的一部分，其中已经存在另一个使用样式化组件的模块。因为该页面上存在这个预先存在的样式化组件实例，它与我的代码冲突，并且不显示使用此lib应用的任何css。

有一个常见问题解答，它提供了一个解决方案，但通过尝试它我得到一些与webpack相关的其他问题如下。

这是我提到的FAQ link。

我相应地改变了我的配置：

entry: {vendor: ['styled-components'], app: './src/index.js'},
externals: {
  'styled-components': {
    commonjs: 'styled-components',
    commonjs2: 'styled-components',
    amd: 'styled-components',
    root: 'styled'
  }
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    minChunks: Infinity,
  })
]

此外，filename配置中的output更改为：filename: '[name].js'

我的webpack版本是3.10.0。

此配置导致错误webpackjsonp is not defined。

也许根据常见问题解答原始问题的方法是正确的，适用于我的情况，但我可能会在配置中遗漏一些东西。请帮忙！

Answer 1

所以我试图找到解决这个问题的方法。我还没有，但OP的方法不起作用（并没有对我有用，这就是原因。

首先，该配置中的externals选项将跳过捆绑样式组件，但是它将尝试从选项中列出的源中查找依赖项。我还没有成功找到那个库，所以这个选项不起作用。

其次，CommonsChunkPlugin将app.js（或者你的主文件被调用的任何东西）包装在webpackJsonp（）函数中，该函数用于正确加载来自供应商文件的依赖项的内容。因此，必须在app.js文件之前加载供应商文件，因为它设置了webpackJson（）函数。

这是一个非常令人沮丧的话题。我正在尝试使用micro-frontends构建一个UI，其中一些使用样式组件，而且只允许单个库的限制让我疯狂。这是一个可怕的设计决定，我只有蔑视图书馆创作者强迫我们。