Webpack代码拆分-防止在构建中复制CSS文件

问题描述

我已经用3.4.1版的Create-React-App引导了我的应用程序，并在使用Craco 5.6.4版对CRA提供的Webpack配置进行修改。由于我无法控制特定的客户期望，因此我需要使用build/js/main.js和build/css/main.css文件结构。通过Craco，我设法根据需要修改了文件输出，除了我最终得到了添加了块哈希的CSS文件的另一个副本。

这是我的craco.config.js：

const { POSTCSS_MODES } = require('@craco/craco');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  style: {
    postcss: {
      mode: POSTCSS_MODES.file,},webpack: {
    configure: {
      optimization: {
        splitChunks: {
          cacheGroups: {
            default: false,runtimeChunk: false,plugins: [
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks: 1,}),new MiniCssExtractPlugin({
          filename: 'css/[name].css',],output: {
        filename: 'js/[name].js',};

这是我运行yarn build时输出的内容：

...

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  60.31 KB  build/js/main.js
  66 B      build/static/css/main.0cb9b881.css
  57 B      build/css/main.css

...

（是的，目前CSS文件中没有规则，这说明它的大小很小。）

我的目标是消除创建第二个文件build/static/css/main.0cb9b881.css。

我尝试对配置进行许多更改，包括 https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-all-css-in-a-single-file，但无济于事。我可以使用MiniCssExtractPlugin生成想要的CSS文件来指定文件名，并可以使用标准的Webpack output文件名生成单个JS包。这是一个未弹出的CRA生成的应用程序，因此，我猜测内置的Webpack配置中有某种机制可以生成额外的文件，而我只需要在Craco配置中覆盖它即可。如果有人确切知道需要重写哪些位，我将非常感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

craco create-react-app webpack webpack webpack