Webpack To Rspack/Remove Raw Loader To Type Asset Source

Last update

Oct 16, 2024

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

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

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

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

const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      use: 'raw-loader',
    });
    return config;
  },
};

const nextConfig = {
  rspack: (config) => {
    config.module.rules.push({
      type: 'asset/source',
    });
    return config;
  },
};

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

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

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

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

const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      use: 'raw-loader',
    });
    return config;
  },
};

const nextConfig = {
  rspack: (config) => {
    config.module.rules.push({
      type: 'asset/source',
    });
    return config;
  },
};

Build custom codemods

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