React create-react-app 构建问题?
问题如下: 想要在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个回答
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;
},
},
};
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容