Break out of Webpack's filesystem! This allows you to plugin virtual files and folders easily.
Note: this has only been tested for Webpack 4 (though it should work for Webpack 3)
npm i @openovate/webpack-jailbreak --save-dev
The following example makes a virtual file denoted by some/virtual/path.js
as
well as 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 JailbreakPlugin = require('@openovate/webpack-jailbreak');
module.exports = {
...
plugins: [
new JailbreakPlugin({
files: {
'some/virtual/path.js': 'console.log("Hello World")';
},
folders: {
'some/virtual/path/in/entry/folder': path.resolve(__dirname, 'actual/location/of/path')
}
})
]
...
};
You can now use your virtual directories relatively anywhere.
const path = require('./some/virtual/path');
const foo = require('./some/virtual/path/in/entry/folder/foo');
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 JailbreakPlugin = require('@openovate/webpack-jailbreak');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'public')
},
plugins: [
new JailbreakPlugin({
folders: {
'src/product': path.resolve(__dirname, '/product')
}
})
]
};
- (4) Run the following commands in terminal
$ npm init -y
$ npm i webpack webpack-cli @openovate/webpack-JailbreakPlugin --save-dev
$ npx webpack --config webpack.config.js
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.
This project is inspired by webpack-virtual-modules (and also extends it).