react 图片绝对路径_React项目webpack打包时重新配置css中图片路径

最近做的一个移动端项目是使用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中引入的背景图却显示错误，我看了下自己项目的目录结构是这样的：

目录结构

样式中使用了绝对路径指向了图片文件夹，我以为是module rules里面url-loader加载图片时的配置路径不对，修改了一下还是不起作用，打包后的背景图片地址仍然不对，挣扎了半天后才看到别人的方案，意识到我less文件中的图片地址写绝对路径是不会被编译解析的。

解决方案

“所以解决方案就是不要在样式内写绝对路径”

由于新的 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")

}),

);