Webpack Virtual Directories

Webpack Virtual Directories is a webpack plugin that lets you build virtual directories relative to the entry file instead of symlinking.

Installation

Note: this has only been tested for Webpack 4 (though it should work for Webpack 3)

npm i webpack-virtual-directories --save-dev

Usage

The following example makes a virtual directory denoted by some/virtual/path/in/entry/folder which is based on an actual directory denoted by actual/location/of/path.

//# FILE: webpack.config.json
const VirtualDirectoryPlugin = require('webpack-virtual-directories');

module.exports = {
  ...
  plugins: [
    new VirtualDirectoryPlugin({
      'some/virtual/path/in/entry/folder': path.resolve(__dirname, 'actual/location/of/path')
    })
  ]
  ...
};

You can now use your virtual directories relatively anywhere.

const foo = require('./some/virtual/path/in/entry/folder/foo');

Example

For this example we will be using require instead of import though the import equivalent should work.

• (1) In your project root folder denoted as [PROJECT_ROOT] create a file called [PROJECT_ROOT]/src/index.js with the following contents.

const { name } = require('./product')
console.log(name)

• (2) Create a file called [PROJECT_ROOT]/product/index.js with the following contents.

module.exports = { name: 'iPhone' }

Notice that [PROJECT_ROOT]/product/index.js is not in the [PROJECT_ROOT]/src/.

• (3) Create a file called [PROJECT_ROOT]/webpack.config.js with the following contents.

const path = require('path');
const VirtualDirectoryPlugin = require('webpack-virtual-directories');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'public')
  },
  plugins: [
    new VirtualDirectoryPlugin({
      'src/product': path.resolve(__dirname, '/product')
    })
  ]
};

• (4) Run the following commands in terminal

$ npm init -y
$ npm i webpack webpack-cli webpack-virtual-directories --save-dev
$ npx webpack --config webpack.config.js

Why

Webpack assumes that all of your project files should either be located in node_modules or relative to the entry directory. To include directories into the entry directory, webpack suggests to use symlinks. This is a programatic way to bundle external directories without symlinking.

Inspiration

This project is inspired by webpack-virtual-modules (and also extends it).