Webpack To Rspack/Remove Url Loader To Type Asset Inline

Last update

Oct 16, 2024

Rspack implements Webpack 5's Asset Modules, using asset modules to replace url-loader to 'asset/inline' for better performance.

Before

module.exports = {
  module: {
    rules: [{
      use: ['url-loader'],
    }, ],
  },
};

After

module.exports = {
  module: {
    rules: [{
      type: 'asset/inline',
    }, ],
  },
};

,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.

Before

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      use: {
        loader: 'url-loader',
      },
    });

    return config;
  },
};

After

module.exports = {
  rspack: (config) => {
    config.module.rules.push({
      type: 'asset/inline',
    });

    return config;
  },
};

Rspack implements Webpack 5's Asset Modules, using asset modules to replace url-loader to 'asset/inline' for better performance.

Before

module.exports = {
  module: {
    rules: [{
      use: ['url-loader'],
    }, ],
  },
};

After

module.exports = {
  module: {
    rules: [{
      type: 'asset/inline',
    }, ],
  },
};

,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.

Before

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      use: {
        loader: 'url-loader',
      },
    });

    return config;
  },
};

After

module.exports = {
  rspack: (config) => {
    config.module.rules.push({
      type: 'asset/inline',
    });

    return config;
  },
};

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now