path-override-webpack-plugin

Webpack plugin that provides a convenience to override modules require paths, with an external set of matching files.

Idea

Webpack has a comprehensive aliasing mechanism, that can be used to point paths to different locations. This essentially does the same, with one difference. When specifying an override for a certain path, if a matching file exists at the override location, it will be resolved instead of the original file. If no file exists, the original file is resolved.

The plugin was conceived as a solution to skinning a complex vanilla application, where any of the original application dependencies, could be directly overriden with an alternative.

// SomeView.js  
import 'app/view/SomeView.scss'
 
// SomeParent.js  
import SomeView from 'app/view/SomeView'

Say we want to override the styles and view with different files, we'd simply add a path override config, providing the files to use in their place.

// webpack.config.js
import PathOverridePlugin from 'path-override-webpack-plugin'
 
const webpackConfig = {
    plugins: [
        new PathOverridePlugin(/^app\/view/, './node_modules/SomeExternalSkin/src')
    ]
}
 

Installation

Install via npm:

npm install --save-dev path-override-webpack-plugin

Api

new PathOverridePlugin(pathRegExp, pathReplacement, extensions)

• pathRegExp (required) regexp the RegExp to match paths against.
• pathReplacement (required) string the path to replace matches with
• extensions (optional) array of extensions to resolve against (default: ['jsx', 'js'])

Roadmap

• Add test suite

--

License (MIT)