具有多个 Webpack 入口点的多个 Tailwind CSS 类

Question

问题陈述

所以我有一个带有 webpack 和 tailwind CSS 的 React 项目设置。
在我的 webpack 配置中，我有多个入口点，以便为每个入口点生成不同的 CSS 和 JS。
当我在我的 React 组件中使用顺风类时，就会出现问题。
假设我仅在 Component1（或入口点 1）中使用顺风类bg-red-600 。
因此，通过 webpack 构建文件后， bg-red-600将出现在所有入口点生成的 CSS 文件中（请记住，我只是在第一个入口点组件中使用了这个类）。
它应该做的只是在第一个组件 CSS 文件中有bg-red-600类，而不是在所有 CSS 文件中预设它，即使我没有在第一个组件以外的任何其他地方使用它。

希望我能够表达我的观点。

谢谢。

Webpack 的入口点：

entry: {
    app1: path.resolve(
        __dirname,
        'src/Component1'
    ),
    app2: path.resolve(
        __dirname,
        'src/Component2'
    ),

},

Answer 1

这是我的解决方案：

1. /config文件夹，其中包含每个条目 js 的自定义 tailwind-xxx.config 文件

例如。 /config/tailwind-ConfirmButton.config.js ：

module.exports = {
  content: [
    './src/common/ConfirmButton/ConfirmButton.jsx',
  ],
  // plugins: [require('@tailwindcss/forms')],
}

2. webpack.config.js

const postcssOpts = { postcssOptions: env => {
    // here is the point
    const component = env._module.context.slice(env._module.context.lastIndexOf('/') + 1)

    return { 
      plugins: [
        ['tailwindcss', {
          config: `./config/tailwind-${component}.config.js`,
        }],
        autoprefixer
      ] 
    }
  } 
}

...

entry: {
  confirm: path.resolve(__dirname, './src/widgets/confirmButton.js'),
},
target: ['web', 'es5'], // <=== can be omitted as default is 'web'
output: {
  filename: '[name]/tag.js',
  path: path.resolve(__dirname, 'dist/exp'),
  publicPath: './',
},

...

{
  test: /\.css$/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
    {
      loader: 'postcss-loader',
      options: postcssOpts,
    },
  ],
},

3. 入口小部件 js 例如。 /src/widgets/customButton.js ：

...

render(
  <ConfirmButton
    expId={expId}
    content={content}
    confirmBtn={confirmBtn}
    cancelBtn={cancelBtn}
    field={field}
  />,
  container
)

4. 最后运行weppack --mode=production