How I can create multi ouput folders into the “/dist/” folder - Webpack

Question

In the destination directory (/dist/) I would like to create three directories with IMAGES folder, CSS folder, JS folder, multi output directories similar to the following screenshoot:

My current entry looks something like this:

My webpack.config.js looks something like this (this code works but it doesn't create the structure that I want ):

                var path = require("path");
            const webpack = require('webpack');
            const ExtractTextPlugin = require("extract-text-webpack-plugin");
            const FileManagerPlugin = require('filemanager-webpack-plugin');
            const extractCSS = new ExtractTextPlugin("css/[name]-1.0.0.css");
            const extractSASS = new ExtractTextPlugin("es/[name].css");
            module.exports = function(env) {
            var isProd = false;
            if (env != null && env.production) {
                isProd = true;
            }
            var jsDev = "./js/[name]-bundle.js";
            var jsProd = "./js/[name]-" + date_string() + ".js";
            var configJs = isProd ? jsProd : jsDev;
            return {
                context: path.resolve(__dirname, "src"),
                entry: {
                    specials: './js/specials.js',
                    checkout: './js/checkout.js',
                    mobile: './js/mobile.js',
                    screen: './js/screen.js',
                    custom: './js/app.js'
                },
                output: {
                    path: path.join(__dirname, "dist"),
                    filename: configJs
                },
                module: {
                    rules: [{
                        test: /\.css$/,
                        use: extractCSS.extract({
                            fallback: "style-loader",
                            use: "css-loader"
                        })
                    }, {
                        test: /\.scss$/,
                        use: extractSASS.extract({
                            fallback: "style-loader",
                            use: ["css-loader", "sass-loader"]
                        })
                    }, {
                        test: /\.(jpg|svg|png|gif)$/,
                        exclude: /fonts/,
                        loaders: [{
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: './images/',
                                publicPath: ''
                            }
                        }]
                    }, {
                        test: /\.(eot|svg|ttf|woff|woff2)$/,
                        exclude: /images/,
                        loader: 'file-loader',
                        options: {
                            name: 'fonts/[name].[ext]',
                            publicPath: ''
                        }
                    }]
                },
                plugins: [
                    extractSASS
                ]
            };

Any help will be appreciated,

Thank you,

Answer 1

Focus on this part of configuration:

var jsDev = "./js/[name]-bundle.js";
var jsProd = "./js/[name]-" + date_string() + ".js";

var configJs = isProd ? jsProd : jsDev;

output: {
  path: path.join(__dirname, "dist"),
  filename: configJs
},

If you change jsDev and jsProd to this:

var jsDev = "./[name]/[name]-bundle.js";
var jsProd = "./[name]/[name]-" + date_string() + ".js";

webpack will create folders with your entries names (specials, checkout etc.).

If you wish more advanced approach you may check this part of webpack documentation: https://webpack.js.org/configuration/output/#output-filename ,

especially the part:

Using function to return the filename:

module.exports = {
  //...
  output: {
    filename: (chunkData) => {
      return chunkData.chunk.name === 'main' ? '[name].js': '[name]/[name].js';
    },
  }
};

There are some resources you might want to also check:

https://hackernoon.com/webpack-creating-dynamically-named-outputs-for-wildcarded-entry-files-9241f596b065

https://www.npmjs.com/package/webpack-entry-plus

https://www.npmjs.com/package/multiple-bundles-webpack-plugin