How to sort output chunks, font and other files in appropiate directories

[benpoe]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ *] feature request

Versions.

@angular/cli: 1.0.1
node: 7.7.2
os: win32 x64
@angular/animations: 4.1.0
@angular/common: 4.1.0
@angular/compiler: 4.1.0
@angular/core: 4.1.0
@angular/forms: 4.1.0
@angular/http: 4.1.0
@angular/platform-browser: 4.1.0
@angular/platform-browser-dynamic: 4.1.0
@angular/platform-server: 4.1.0
@angular/router: 4.1.0
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.0

Repro steps.

npm run build:prod:aot

The log given by the failure.

none

Desired functionality.

When doing a "npm run build" all js-chunks, bundles, fonts are thrown into the "dist"-directory.
Using webpack I'd have sorted them into appropiate directories. js in "js", fonts in "fonts" etc.

              {
                  test: /\.woff(2)?(\?v=.+)?$/,
                  //    use: 'url-loader?limit=10000&mimetype=application/font-woff'
                  use: 'url-loader?limit=10000&mimetype=application/font-woff&name=**assets/fonts/**[name].[ext]'
              },

              {
                  test: /\.(ttf|eot|svg)(\?v=.+)?$/,
                  //use: 'file-loader'
                  loader: 'file-loader?name=**assets/fonts/**[name].[ext]'
              },

        output: {
            path: helpers.root('dist'),
            filename: '**js/**[name].[chunkhash].bundle.js',
            sourceMapFilename: '**js/**[name].[chunkhash].bundle.map',
            chunkFilename: '**js/**[id].[chunkhash].chunk.js'
        },

It'd be great if angular-cli would have an option to configure the output too.

[benpoe]

It'd be handy if .angular-cli.json has the option to sort filechunks.

For example the angular-cli.json could look like this:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/easy-pie-chart/dist/jquery.easypiechart.js",
"../node_modules/jquery-slimscroll/jquery.slimscroll.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/handsontable/dist/handsontable.full.js",
"../node_modules/chroma-js/chroma.js"
],
"outputSorter:"[{ extension: "ttf|eot|svg", outdir:"assets/fonts"},
{ extension: "js|js.map", outdir:"js"}, ]"

--
However, if it's not possible to have such an option, maybe you could add the changes in the hidden webpack-config itself?

[pronebel]

I need this feature also.
in production , the path need to support the domain path ,like "http://static.file.com/xxx.js"
thanks

[sumitarora]

@benpoe Anything you have in assets folder is copied as it is to assets folder keeping the directory structure.

[benpoe]

@sumitarora I'm not talking about static files. I'm talking about fonts and sass files referenced in node_modules and js compiled from the ts-files. These are all placed in the directory root.

[sukeshlaghate]

I need this feature too. It would be nice to be able to tell cli build to put inside dist folder

1. All built *.js files in js folder
2. All .scss/.CSS files is CSS folder
3. All font files in fonts folder
4. Index.html in sub folder for example ./dist/template this becomes useful when serving with Django which follows this kind of structure

[eixin]

Would it be nice to have webpack 'limit' option which was handy to bundle everything less than 10k into CSS in previous versions of CLI? If no, could please somebody be so kind to explain what was fundamentally wrong with it (I see the comment #12731 (comment) saying that it was by design to stop this bundling)?