最近做的一个移动端项目是使用CRA搭建的，由于CRA脚手架是将webpack的配置封装了起来，为了便于自己修改webpack配置，在项目中引入了react-app-rewired包，这时项目的根目录下生成了一个config-overrides.js文件，在这个文件里修改webpack默认配置即可。
项目使用了antd-mobile组件，所以在webpack配置中写入了babel-plugin-import按需加载ant-mobile样式。项目build之后代码放在了自己的一个测试服 http://***.com/my-app/目录下面，页面显示正常，但是css中引入的背景图却显示错误，我看了下自己项目的目录结构是这样的：
目录结构
解决方案
“所以解决方案就是不要在样式内写绝对路径”
由于新的 react-app-rewired@2.x 版本的关系，我在项目中又引入了 customize-cra
npm install customize-cra --save-dev
然后将public下的image文件夹移到src/assets目录下，并且使用addWebpackAlias方法配置了图片文件夹的目录别名，别名就叫aliasimgurl，这样样式文件里的图片路径就可以改为下面这样：
.am-list-body .am-list-item .am-list-thumb .saler-pic{
background: url(~aliasimgurl/space_saler.png);
background-size: cover;
}
修改后
build打包后的图片地址会以相对路径显示，样式中背景小图标也会被转换为base64字符串显示，图片也有了版本号。
const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
const path = require("path");
const rewiredMap = () => config => {
if(config.mode === 'production'){
config.module.rules[2].oneOf.splice(0,1,{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
use: [{
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'images/[name].[hash:8].[ext]'
}
}]
});
}
config.resolve.extensions.push('.less');
return config;
};
module.exports = override(
rewiredMap(),
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
addWebpackAlias({
["aliasimgurl"]: path.resolve(__dirname, "src/assets/images")
}),
);
也有一些其他解决背景图路径问题的方案 可以参考生成的css文件中background url()图片路径问题
[参考]: https://github.com/vuejs/vue-loader/issues/481
