如何使用 CRA 中的 Webpack 配置覆盖更改 CSS 包名称？

Question

我目前有一个 config-overrides.js 文件，用于更改 Create React App 为 JS 文件生成的包名称。我希望能够将类似的逻辑应用到我的 CSS 包中。

配置覆盖文件的内容如下：

module.exports = function override(config, webpackEnv) {
  const isEnvDevelopment = webpackEnv === 'development';
  const isEnvProduction = webpackEnv === 'production';

  config.output.filename = isEnvProduction
    ? 'static/js/[name].js?nocache=[contenthash:8]'
    : isEnvDevelopment && 'static/js/bundle.js';
  config.output.chunkFilename = isEnvProduction
    ? 'static/js/[name].chunk.js?nocache=[contenthash:8]'
    : isEnvDevelopment && 'static/js/[name].chunk.js';

  return config
}

除了 CSS bundles/chunks 我怎样才能达到相同的结果？

编辑： 我注意到我跳过了我正在使用 react-app-rewired 进行配置覆盖的事实。

Answer 1

我不这么认为，特别是在当前这个时间。 CRA 有一个可以破坏整体的 hack。 CRA 落后了，postcss 当前版本是 8，CRA 使用的一些软件包使用 postcss 的版本 7，而 v8 带有中断更改。即使你能做到这一点，你也无法修复其余的 w/out 弹出问题。

但是，有一个巨大的但是，CRA 在他们的插件部分使用这个 webpack。

of the problems.new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "static/css/[name].[contenthash:8].css",
            chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
        }),

而且他们还有一个 webpack 加载器

    // "file" loader makes sure those assets get served by WebpackDevServer.
                    // When you `import` an asset, you get its (virtual) filename.
                    // In production, they would get copied to the `build` folder.
                    // This loader doesn't use a "test" so it will catch all modules
                    // that fall through the other loaders.
                    {
                        loader: require.resolve("file-loader"),
                        // Exclude `js` files to keep "css" loader working as it injects
                        // its runtime that would otherwise be processed through "file" loader.
                        // Also exclude `html` and `json` extensions so they get processed
                        // by webpacks internal loaders.
                        exclude: [ /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/ ],
                        options: {
                            name: "static/media/[name].[hash:8].[ext]",
                        },
                    },

如何使用 CRA 中的 Webpack 配置覆盖更改 CSS 包名称？

How to change the CSS bundle name using a Webpack config override in CRA?

javascript

css

bundle

webpack

create-react-app