CODEWITHSUNDEEP
javascriptwebpackbuild-processbuild-tools
maxedison
maxedison

Reputation: 17553

Make Webpack output files relative to the input files

Let's assume I want my compiled JavaScript files to exist side-by-side with my source files, resulting in a directory structure like:

- TimeframeToolbar
    - TimeframeToolbar_compiled.js
    - TimeframeToolbar_src.js
    - dependencies
        - *contains js files that are imported by TimeframeToolbar_src.js*

Is it possible to do this with Webpack? From what I can tell, the output path only allows a single directory, meaning that the source and compiled file trees must be totally separate.

Upvotes: 1

Views: 830

Answers (1)

maxedison
maxedison

Reputation: 17553

The trick is to make the keys of your entry configuration object the path you want for the output files. For example:

entry: {
    'feature-1/feature-1': './dev/feature-1/feature-1.jsx',
    'feature-2/feature-2': './dev/feature-2/feature-2.jsx',
},
output: {
    filename: '[name].js',
    path: './build',
}

This will result in the following compiled files:

./build/feature-1/feature-1.js
./build/feature-2/feature-2.js

So essentially the [name] placeholder in output.filename ends up being a directory path rather than just a file name.

Upvotes: 3

Related Questions