How to specify multiple webpack output directories

Question

I have a large django project, with multiple apps, and each application has its own static directory like this /[appname]/static/[appname]/[css, js, or img directory].

I have multiple entrypoints because of this (and because I want to use code splitting), so my webpack config file with two apps looks like this:

const path = require('path')


module.exports = {
    entry: {
        core: './core/static/core/js/base.js',
        info: './info/static/info/js/base.js',
    },
    output: {
        filename: '[name]/bundle.js',
        path: path.resolve(__dirname, 'core', 'static', 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
        ],
    },
};

My problem is that instead of sending all the bundled files to the "dist" sub-directory inside my "core" app's static directory I want the output directory (path) to be dynamically generated like this [appname]/static/[appname]/dist. Is there a way to do this?

One solution I thought of was to just set the output filename to be '[name]/static/[name]/dist/'. This worked, however, because the output directory wasnt specified any images loaded from the css files were placed in the root directory of my project, not the "dist" sub-directory.

biodiscus · Accepted Answer · 2023-05-12 10:06:24Z

You should use the Webpack multiple configurations.

For each app using different output path create the own configuration, for example:

const path = require('path')

// common used module rules
const moduleRules = {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
        ],
    }:

module.exports = [
 // App core  
 {
    entry: {
        core: './core/static/core/js/base.js',
    },
    output: {
        filename: '[name]/bundle.js',
        path: path.resolve(__dirname, 'core', 'static', 'dist'), // <= diff output path
    },
    module: moduleRules,
  },
  
  // App info
  {
    entry: {
        info: './info/static/info/js/base.js',
    },
    output: {
        filename: '[name]/bundle.js',
        path: path.resolve(__dirname, 'info', 'static', 'dist'), // <= diff output path
    },
    module: moduleRules,
  },
];

Collectives™ on Stack Overflow

How to specify multiple webpack output directories

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related