Webpack bundle files placed outside Project folder

Question

Is it possible to create/add to the bundle components that are outside the project folder

Folders Structure

Project1
--src
----components

Project2
--src
----components

What should be done in webpack.config.js in order to add components from one project to the other (assuming that node_modules are the same). Using Webpack3.

Answer 1

Where you specify your output information, you can use path.resolve with .. to access higher level directories.

So you would add path to your webpack.config:

const path = require("path");

And then within your build configuration that you are exporting, you can modify your path like such, which would go to a dist folder three folders up from your config file's location:

output: {
    path: path.resolve(__dirname, "./../../../dist"),
    filename: "app.bundle.js"
}

__dirname is a global read-only variable that should automatically be set to the path of your webpack.config.js.

If you mean to source the build from the external source, you should be able to set your entry point to the other project in a similar manner. In this example, the path would resolve two levels higher from the path of your webconfig and then locate app.tsx under Project2, src, components.

entry: [ path.resolve(__dirname, "./../../Project2/src/components") + "/app.tsx" ]