我想通过react-app-rewired覆盖Webpack配置。但是我在项目中使用Ant设计,因此必须使用Customize-CRA导入Babel插件等。如何将React-app-rewired和Customize-CRA一起使用。
React-app-rewire的config-overrides.js如下:
module.exports = function override(config, env) {
config.module.rules = config.module.rules.map(rule => {
if (rule.oneOf instanceof Array) {
return {
...rule,
oneOf: [
{
test: /\.(svg|png|jpg|jpeg|gif|bmp|tiff)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name]-[hash:8].[ext]'
}
}
]
},
...rule.oneOf
]
};
}
return rule;
});
return config;
}
用于Customize-CRA的config-overrides.js如下:
const {override, fixBabelImports, addLessLoader, addDecoratorsLegacy, disableEsLint} = require('customize-cra');
module.exports = override(
addDecoratorsLegacy(),
disableEsLint(),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: {'@primary-color': '#a50052'},
}),
);
谢谢。
答案 0 :(得分:0)
在react-app-wired配置后,自定义cra对我有用。如果我将一个对象分配给config,则不起作用,但如果逐行修复config,则它起作用。我敢肯定有一个更优雅的解决方案。
module.exports = function override(config, env) {
const APP = process.env.REACT_APP_APP
const BRAND = process.env.REACT_APP_BRAND
addWebpackAlias({
['@app-config']: path.resolve(__dirname, `./src/brands/${BRAND}/app`),
})
config.entry = `./src/${APP}/index.js`
config.resolve.alias['@app-config'] = path.resolve(__dirname, `./src/brands/${BRAND}`)
config.resolve.modules = [
path.join(__dirname, `src/brands/${BRAND}`)
].concat(config.resolve.modules)
return config
};
答案 1 :(得分:0)
我从蚂蚁设计文档中找到了提示:
const {
override,
fixBabelImports,
} = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd-mobile",
style: 'css'
})
);
参考:
https://mobile.ant.design/docs/react/use-with-create-react-app#Use-modularized-antd-mobile
答案 2 :(得分:0)
我认为我遇到了与您相同的问题。 Customize-cra覆盖将任意数量的覆盖函数作为参数。每个函数都以config作为其第一个参数。将其视为一个组合功能。进行现有的覆盖导出,将其放入您定义的函数中,我称之为myOverrides之类的东西,然后使用您的覆盖功能作为参数之一导出custom-cra的覆盖。
之前:
module.exports = function override(config, env){
// do stuff to config
return config
}
之后:
function myOverrides(config) {
// do stuff to config
return config
}
module.exports = override(
myOverrides,
addDecoratorsLegacy(),
disableEsLint(),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: {'@primary-color': '#a50052'},
}),
);