How to create multiple output paths in Webpack config

webpack multiple configs
webpack multiple output directories
webpack output publicpath
webpack multiple bundles
webpack multiple public paths
webpack dynamic entry points
webpack multiple entries
webpack output multiple js files

Does anyone know how to create multiple output paths in a webpack.config.js file? I'm using bootstrap-sass which comes with a few different font files, etc. For webpack to process these i've included file-loader which is working correctly, however the files it outputs are being saved to the output path i specified for the rest of my files:

    output: {
      path: __dirname + "/js",
      filename: "scripts.min.js"

I'd like to achieve something where I can maybe look at the extension types for whatever webpack is outputting and for things ending in .woff .eot, etc, have them diverted to a different output path. Is this possible?

I did a little googling and came across this *issue on github where a couple of solutions are offered, edit:

but it looks as if you need to know the entry point in able to specify an output using the hash method eg:

var entryPointsPathPrefix = './src/javascripts/pages';
var WebpackConfig = {
  entry : {
    a: entryPointsPathPrefix + '/a.jsx',
    b: entryPointsPathPrefix + '/b.jsx',
    c: entryPointsPathPrefix + '/c.jsx',
    d: entryPointsPathPrefix + '/d.jsx'

  // send to distribution
  output: {
    path: './dist/js',
    filename: '[name].js'


however in my case, as far as the font files are concerned, the input process is kind of abstracted away and all i know is the output. in the case of my other files undergoing transformations, there's a known point where i'm requiring them in to be then handled by my loaders. if there was a way of finding out where this step was happening, i could then use the hash method to customize output paths, but i don't know where these files are being required in.

I'm not sure if we have the same problem since webpack only support one output per configuration as of Jun 2016. I guess you already seen the issue on Github.

But I separate the output path by using the multi-compiler. (i.e. separating the configuration object of webpack.config.js).

var config = {
    // TODO: Add common Configuration
    module: {},

var fooConfig = Object.assign({}, config, {
    name: "a",
    entry: "./a/app",
    output: {
       path: "./a",
       filename: "bundle.js"
var barConfig = Object.assign({}, config,{
    name: "b",
    entry: "./b/app",
    output: {
       path: "./b",
       filename: "bundle.js"

// Return Array of Configurations
module.exports = [
    fooConfig, barConfig,       

If you have common configuration among them, you could use the extend library or Object.assign in ES6 or {...} spread operator in ES7.

The need for multiple output paths? � Issue #1189 � webpack , webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging � You can also create the output path mappings for input files using glob and the following callback. How to create multiple output paths in Webpack config. 1.

Webpack does support multiple output paths.

Set the output paths as the entry key. And use the name as output template.

webpack config:

entry: {
    'module/a/index': 'module/a/index.js',
    'module/b/index': 'module/b/index.js',
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'


└── module
    ├── a
    │   └── index.js
    └── b
        └── index.js

Output, We will show you the ways you can configure the entry property, in addition to of file paths to the entry property creates what is known as a "multi-main entry". How to create multiple output paths in Webpack config (4) Does anyone know how to create multiple output paths in a webpack.config.js file? I'm using bootstrap-sass which comes with a few different font files, etc.

If you can live with multiple output paths having the same level of depth and folder structure there is a way to do this in webpack 2 (have yet to test with webpack 1.x)

Basically you don't follow the doc rules and you provide a path for the filename.

module.exports = {
    entry: {
      foo: 'foo.js',
      bar: 'bar.js'

    output: {
      path: path.join(__dirname, 'components'),
      filename: '[name]/dist/[name].bundle.js', // Hacky way to force webpack   to have multiple output folders vs multiple files per one path

That will take this folder structure


And turn it into


Entry Points, webpack.config.js The bundle is written to the directory specified by the output. path option. However, when creating multiple bundles via more than one entry point, code splitting, or various plugins, you should use one of the following� Multiple modules for multiple entry points in webpack config for reactjs app - Stack Overflow. In case of multiple entry points, this is the example I got:module.exports = { entry: { user1: path.join(__dirname, './client/app1.js'), user2: path.join(__dirname, './client/ Stack Overflow.

I wrote a plugin that can hopefully do what you want, you can specify known or unknown entry points (using glob) and specify exact outputs or dynamically generate them using the entry file path and name.

Output Management, Now adjust the config. We'll be adding our src/print.js as a new entry point ( print ) and we'll change the output as well, so that it will dynamically generate bundle� Since, now I would like to include CSS into the build system, but now since I have my output path in the webpack.config.js to ./dist/js, so even my CSS files are being generated there. I think it is important to have multiple output paths.

You definitely can return array of configurations from your webpack.config file. But it's not an optimal solution if you just want a copy of artifacts to be in the folder of your project's documentation, since it makes webpack build your code twice doubling the overall time to build.

In this case I'd recommend to use the FileManagerWebpackPlugin plugin instead:

const FileManagerPlugin = require('filemanager-webpack-plugin');
// ...
plugins: [
    // ...
    new FileManagerPlugin({
      onEnd: {
        copy: [{
          source: './dist/*.*',
          destination: './public/',

Advanced entry, webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging � The minimum requirement for the output property in your webpack configuration is to set its value to an object and provide an output.filename to use for the output file(s): webpack.config.js. module. exports = {output: {filename: 'bundle.js',}}; This configuration would output a single bundle.js file into the dist directory. Multiple Entry Points

Webpack: How to Create Dynamic Entry & Output paths, For those that don't want to read and just want the config file then here you go. All you need to do is change the path string passed to the glob. Along with exporting a single configuration as an object, function or Promise, you can export multiple configurations. See: Exporting multiple configurations. Using other Configuration Languages. webpack accepts configuration files written in multiple programming and data languages. See: Configuration Languages

30 Answers from Stack Overflow to the most popular webpack , But I separate the output path by using the multi-compiler. (i.e. separating the configuration object of webpack.config.js ). var config = { // TODO: Add common� webpack.config.js. const path = require ('path'); module. exports = {// Chosen mode tells webpack to use its built-in optimizations accordingly. // defaults to ./src // Here the application starts executing // and webpack starts bundling // options related to how webpack emits results path: path. resolve (__dirname, "dist"), // string // the target directory for all output files // must be an absolute path (use the Node.js path module) // the filename template for entry chunks // the url to

Understand Webpack and solution for Webpack Multiple entry , This article has two parts one will make you understand Webpack in case if you deal by providing solution for Webpack Multiple entry/Multiple output issue. i.e. jump to the path where the file called "webpack.config.js" is present as we all� let commonsPlugin = new webpack.optimize.CommonsChunkPlugin ( 'commons', // Just name it 'common.js' // Name of the output file // There are more options, but we don't need them yet.

  • I didn't run the snippet, some error or typo may occur
  • I did run your snippet, works like charm... Surprised no one spotted this, eh frontend developers, no patience, always in hurry ;-). I export configs the same way, but my declaration is different/standard: var config = { entry: SOURCE_DIR + '/index.jsx', .... } Did not use any multi compiler as well :-\
  • Or you can just do a webpack && cp etc in npm?
  • That's very useful for me to deploy an npm package both in the original folder (automatic tests are there) but also in the folder of the app that implements the package. In this way I can skip the npm download step and live test my updated package code until the new version is stable and ready to be published on npm.
  • <pre><code> var config = { // TODO: Add common Configuration module: {}, }; </code></pre> The module{} object is incorrect. It's not required. It will be extended/merged at the same level as keywords name, entry, output (from your example). <pre><code> { module: { mode: "development", devtool: "source-map" } }, name: "a", entry: "./a/app", output: { path: "/a", filename: "bundle.js" } } </code></pre>
  • In my case I want one output to not contain chunkhash, is there any simple solution to that? Thanks.
  • @zhengkenghong I believe that the generated output path would need dist in it. So instead of module/a/index.js being an output path, it should be module/a/dist/index.js Or else, you are overriding your entry files.
  • @Sung dist folder is already configured in output path. So the generated file would actually be dist/module/a/index.js, which i didn't mention.
  • I think this should be the accepted answer as it is the answer from the webpack 4 docs. ->
  • @raRaRa Late to the party, but you can do that by using a function for output.filename as documented here:
  • @ccnixon it is documented here seach for "still allowed".
  • thanks. i'm gonna leave the Q just in case someone might be able to come up with a workaround.