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")
  }),
);

也有一些其他解决背景图路径问题的方案可以参考生成的css文件中background url()图片路径问题
[参考]: https://github.com/vuejs/vue-loader/issues/481

React项目webpack打包时重新配置css中图片路径

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

推荐阅读更多精彩内容