1. dynamic-resolve-webpack-plugin
a webpack plugin for dynamic resolve paths
dynamic-resolve-webpack-plugin
Package: dynamic-resolve-webpack-plugin
Last modified: Wed, 17 Aug 2022 11:41:47 GMT
Version: 2.0.0
License: MIT
Downloads: 11

Install

npm install dynamic-resolve-webpack-plugin
yarn add dynamic-resolve-webpack-plugin

A webpack plugin for dynamic resolve paths, you can use it to resolve paths dynamically.

Getting Started

  1. Install as devDependencies:
 pnpm install dynamic-resolve-webpack-plugin
  1. custom dynamic resolve function:
 const targetDir = path.resolve('./custom-icon');
const baseDir = require
  .resolve('@ant-design/icons-svg')
  .replace(/lib\/index\.js/, 'es/asn/');
const scopeList = list.map((file) => path.join(baseDir, file));

function dynamic(request) {
  const innerPath = request.request || request.path;
  if (scopeList.includes(innerPath)) {
    request.path = path.join(targetDir, innerPath.split(baseDir)[1]);
    return request;
  }
  return request;
}

  1. then add it to webpack resolve plugin config:
 config.resolve.plugins.push(
      new DynamicResolvePlugin({
        dynamic,
      })
    );

Ensure This Plugin is used in webpack resolve plugins

Options

 type IOptions = {
  source: string; // enhanced-resolve register hook, default value is `file`
  target: string; // next hooks to call, default value is `final-file`
  dynamic: <T>(request: T) => T; //dynamic function, you can do whatever you want with callback parameter request, and you should return it back after modified.
};

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin