Question

我有一个包含多个反应组件的repo，它们需要彼此完全分离，所以每个组件都有自己的输出目录，各自有CSS，JS和HTML。为了实现这一点，我迭代了一个包含所有组件名称的数组，添加了入口点，HTMLWebpackPlugin，SASS和CSS加载器以及提取文本插件，每个插件都包含组件的路径。

config = { /*...someGlobalWebpackSettings like alias, externals etc. */ }


components.forEach(component => {
  const extractStyles = new ExtractTextPlugin({ allChunks: true, filename: `${component}/${component}.css` })
  const componentPath = path.resolve(base, 'src', 'components', component)

  config.entry[component] = componentPath

  config.plugins.push(extractStyles)
  config.plugins.push(new HtmlWebpackPlugin({
    filename: path.resolve(base, 'dist', `${component}/${component}.html`),
    chunks: [component],
    template: path.resolve(base, 'index.html')
  }))

  config.module.rules.push({
    test: /\.scss$/,
    exclude: /node_modules/,
    include: [componentPath],
    use: extractStyles.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'sass-loader']
    })
  })

  config.module.rules.push({
    test: /\.css$/,
    include: [componentPath, ...publicStylePaths],
    use: extractStyles.extract({
      fallback: "style-loader",
      use: ["css-loader"]
    })
  })
})

这只适用于一个组件，但由于某些原因，当添加第二个组件时，第一个组件的样式会消失，这意味着相应的CSS文件只包含全局样式而不是特定于组件的样式。这可能与ExtractText插件无法在多个实例中正常工作有关，但我真的不确定。

Screenshot of Webpack build output

查看webpack构建输出，您可以看到，第二个css文件要小得多，因为它只有全局样式。令我恼火的是，两个css文件都列出了组件块，这是什么意思？

这里有没有人有适当的解决方案，或者试图达到类似的目的？他们是一个明显的方式，我不知道吗？非常感谢提前！

使用ExtractText Webpack多个CSS输出

0 个答案: