React create-react-app 构建问题?

作者站长头像
站长
· 阅读数 7

问题如下: 想要在React 项目执行yarn build 时, 给index.html 增加后缀没有使用react-eject, 使用的是crao 替代, 但是craco.config.js 配置 HtmlWebpackPlugin不生效。craco.config.js 配置如下:

const CracoLessPlugin = require('craco-less')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
    },
  ],
  webpack: {
    plugins: {
      add: [
        [
          new HtmlWebpackPlugin({
            filename: 'index.[contenthash].html',
          }),
          'prepend',
        ],
      ],
    },
  },
}

package.json 部分组件版本如下:

 "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.2",
    "web-vitals": "^2.1.4"
  }, 
"devDependencies": {
    "@craco/craco": "^7.1.0",
    "craco-less": "^2.0.0",
    "html-webpack-plugin": "^5.5.1",
  }
 "scripts": {
    "dev": "set PORT=4488 && craco start",
    "build": "craco build",
  },

执行yarn build 打包后,配置无效, 请教各位大佬们了

回复
1个回答
avatar
test
2024-07-04

你要直接修改 webpack 配置:

const CracoLessPlugin = require('craco-less');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
    },
  ],
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
    
      const htmlWebpackPlugin = webpackConfig.plugins.find(
        (plugin) => plugin.constructor.name === 'HtmlWebpackPlugin'
      );

      if (htmlWebpackPlugin) {
        // 修改 HtmlWebpackPlugin 配置
        htmlWebpackPlugin.options.filename = 'index.[contenthash].html';
      }

      return webpackConfig;
    },
  },
};
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容