Webpack Virtual Directories is a webpack plugin that lets you build virtual directories relative to the entry file instead of symlinking.
npm install webpack-virtual-directoriesWebpack Virtual Directories is a webpack plugin that lets you build virtual
directories relative to the entry file instead of symlinking.
> Note: this has only been tested for Webpack 4 (though it should work for Webpack 3)
``bash`
npm i webpack-virtual-directories --save-dev
The following example makes a virtual directory denoted by
some/virtual/path/in/entry/folder which is based on an actual directoryactual/location/of/path
denoted by .
`js
//# 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.
`js`
const foo = require('./some/virtual/path/in/entry/folder/foo');
For this example we will be using require instead of import though theimport 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.
`js`
const { name } = require('./product')
console.log(name)
* (2) Create a file called [PROJECT_ROOT]/product/index.js with the following contents.
`js`
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.
`js
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
`bash`
$ npm init -y
$ npm i webpack webpack-cli webpack-virtual-directories --save-dev
$ npx webpack --config webpack.config.js
Webpack assumes that all of your project files should either be located in node_modulesentry` directory. To include directories into the entry directory,
or relative to the
webpack suggests to use symlinks.
This is a programatic way to bundle external directories without symlinking.
This project is inspired by webpack-virtual-modules
(and also extends it).