How to create multiple output paths in Webpack config

Question

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           https   github com webpack webpack issues 1189  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

User · Answer

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'
}

generated:

+-- module
    +-- a
    ¦   +-- index.js
    +-- b
        +-- index.js

User · Answer

I actually wound up just going into index js in the file-loader module and changing where the contents were emitted to  This is probably not the optimal solution  but until there s some other way  this is fine since I know exactly what s being handled by this loader  which is just fonts     index js var loaderUtils   require  loader-utils    module exports   function content        this cacheable  amp  amp  this cacheable        if  this emitFile  throw new Error  emitFile is required from module system        var query   loaderUtils parseQuery this query       var url   loaderUtils interpolateName this  query name      hash   ext              context  query context    this options context          content  content          regExp  query regExp             this emitFile  fonts    url  content    changed path to emit contents to  fonts  folder rather than project root     return  module exports     webpack public path         JSON stringify  url           module exports raw   true

User · Answer

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

User · Answer

If it s not obvious after all the answers you can also output to a completely different directories  for example a directory outside your standard dist folder   You can do that by using your root as a path  because you only have one path  and by moving the full  quot directory part quot  of your path to the entry option  because you can have multiple entries   entry       dist main      src index js      docs main      src index js     output      filename    name  js     path  path resolve   dirname            This config results in the   dist main js and   docs main js being created

User · Answer

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

User · Answer

Please don t use any workaround because it will impact build performance  Webpack File Manager Plugin Easy to install copy this tag on top of the webpack config js const FileManagerPlugin   require  filemanager-webpack-plugin     Install npm install filemanager-webpack-plugin --save-dev Add the plugin module exports         plugins            new FileManagerPlugin               onEnd                    copy                         source   www   destination     vinod test 1                          source   www   destination     vinod testing 2                          source   www   destination     vinod testing 3                                                              Screenshot

User · Answer

The problem is already in the language   entry  which is a object  key value  and is used to define the inputs   output  which is a object  key value  and is used to define outputs    the idea to differentiate the output based on limited placeholder like   name   defines limitations  I like the core functionality of webpack  but the usage requires a rewrite with abstract definitions which are based on logic and simplicity    the hardest thing in software-development    logic and simplicity  All this could be solved by just providing a list of input output definitions    A LIST INPUT OUTPUT DEFINITIONS  Although this comment doesn t help much but we can learn from our mistakes by pointing at them  Vinod Kumar  Good workaround  its  module exports        plugins        new FileManagerPlugin         events            onEnd              copy                 source   www   destination     vinod test 1                  source   www   destination     vinod testing 2                  source   www   destination     vinod testing 3                                                       BTW  this is my first comment on stackoverflow  after 10 years as a programmer  and stackoverflow sucks in usability  like why is there so much text everywhere   my eyes are bleeding

User · Answer

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   -   foo js   bar js   And turn it into   -   foo js   bar js   components foo dist foo js   components bar dist bar js

User · Answer

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   https   www npmjs com package webpack-entry-plus

User · Answer

You can only have one output path  from the docs https   github com webpack docs wiki configuration output  Options affecting the output of the compilation  output options tell Webpack how to write the compiled files to disk  Note  that while there can be multiple entry points  only one output configuration is specified  If you use any hashing   hash  or  chunkhash   make sure to have a consistent ordering of modules  Use the OccurenceOrderPlugin or recordsPath

User · Answer

u can do lik var config            TODO  Add common Configuration     module          var x  Object assign     config        name   quot x quot       entry   quot   public x js x js quot       output           path    dirname  quot  public x jsbuild quot          filename   quot xbundle js quot             var y  Object assign     config        name   quot y quot       entry   quot   public y js FBRscript js quot       output           path    dirname  quot  public fbr jsbuild quot          filename   quot ybundle js quot              let list  x y    for item of list       module exports  item

User · Answer

You can now  as of Webpack v5 0 0  specify a unique output path for each entry using the new  quot descriptor quot  syntax  https   webpack js org configuration entry-context  entry-descriptor      module exports       entry        home    import     home js   filename   unique path 1  name  ext          about    import     about js   filename   unique path 2  name  ext

[path] How to create multiple output paths in Webpack config

Examples related to path

Examples related to output

Examples related to config

Examples related to webpack

Examples related to loader