umi 打包之修改打包后的静态资源路径

//chainWebpack.js
// 打包配置，image未测试
const staticDir = 'xxx_static';
const isDev = process.env.NODE_ENV === 'development';

const ChainWebpack = (config, { webpack }) => {
  // 修改css输出目录
  config.plugin('extract-css').tap(() => [
    {
      filename: `${staticDir}/css/[name].[contenthash:8].css`,
      chunkFilename: `${staticDir}/css/[name].[contenthash:8].chunk.css`,
      ignoreOrder: true,
    },
  ]);

  config.module
    .rule('css')
    .oneOf('css')
    .use('extract-css-loader')
    .tap((options) => ({
      publicPath: '/',
      hmr: isDev,
    }));

  config.module
    .rule('less')
    .oneOf('css')
    .use('extract-css-loader')
    .tap((options) => ({
      publicPath: '/',
      hmr: isDev,
    }));
  
 // 修改js输出目录
  config.output
    .filename(`${staticDir}/js/[name].[hash:8].js`)
    .chunkFilename(`${staticDir}/js/[name].[contenthash:8].chunk.js`);

 // 修改image输出目录
  config.module
    .rule('images')
    .test(/\.(png|jpe?g|gif|webp|ico)(\?.*)?$/)
    .use('url-loader')
    .loader(require.resolve('@umijs/deps/compiled/url-loader'))
    .options({
      name: `${staticDir}/[name].[hash:8].[ext]`,
      // require 图片的时候不用加 .default
      esModule: false,
      fallback: {
        loader: require.resolve('@umijs/deps/compiled/file-loader'),
        options: {
          name: `${staticDir}/images/[name].[hash:8].[ext]`,
          esModule: false,
        },
      },
    });

// 修改svg输出目录
  config.module
    .rule('svg')
    .test(/\.(svg)(\?.*)?$/)
    .use('file-loader')
    .loader(require.resolve('@umijs/deps/compiled/file-loader'))
    .options({
      name: `${staticDir}/images/[name].[hash:8].[ext]`,
      esModule: false,
    });

// 修改font输出目录
  config.module
    .rule('fonts')
    .test(/\.(eot|woff|woff2|ttf)(\?.*)?$/)
    .use('file-loader')
    .loader(require.resolve('@umijs/deps/compiled/file-loader'))
    .options({
      name: `${staticDir}/fonts/[name].[hash:8].[ext]`,
      esModule: false,
    });
};
export default ChainWebpack;