Webpack splits output into vendor.js, app.js, templates.js, app.css and vendor.css

I'm new to webpack and there are so many options out there with so little documentation that I really don't know how to proceed.

My application is structured in such a way that it is easy for me to create standalone components (written in AngularJS) and looks like this:

• app / styles / contains general style sheets and modules that are global to the application and shared by components.
• app / src / contains components like app / src / dashboard /.
• app / src / dashboard / can contain .js files (which are required by index.js), component-specific scss files in _resources / stylesheets, and .html templates in _resources / views.

So I am trying to create multiple output files so that the browser can handle the cache efficiently.

So far, I have managed to link templates.js, vendor.js and app.js files correctly using the following Webpack config:

var path = require("path");
var webpack = require("webpack");

var SplitByNamePlugin = require('split-by-name-webpack-plugin');

module.exports = {
    entry: {
        app: path.resolve(__dirname, 'app/src/app.js')
    },

    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js',
        chunkFilename: '[name].js'
    },

    resolve: {
        root: [
            path.resolve(__dirname, "bower_components")
        ],
        alias: {
            component: path.resolve(__dirname, "app/src"),
            root: path.resolve(__dirname),
            bower: path.resolve(__dirname, "bower_components"),
            node: path.resolve(__dirname, "node_modules"),
            stylesheet: path.resolve(__dirname, "app/sass")
        }
    },

    plugins: [
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ),

        new SplitByNamePlugin({
            buckets: [
                {
                    name: 'templates',
                    regex: /\.html/
                },
                {
                    name: 'vendor',
                    regex: /node|bower/
                }
            ]
        })
    ],

    module: {
        loaders: [
            {
                test: /\.json/,
                loader: "json-loader"
            },
            /*{
                test: /\.scss/,
                loader: "style!css!sass"
            },*/
            {
                // angularjs doesn't properly export a CommonJS module, so we need to manually export the variable
                test: /[\/]angular\.js$/,
                loader: "exports?angular"
            },
            {
                test: /\.html$/,
                loader: "ngtemplate?relativeTo=" + (path.resolve(__dirname)) + "/!html"
            }
        ]
    }
};

      

        
        
        
      

    

Basically every .js file required using a bower or node alias is built into the vendor.js file, everything else is app.js. Anything with a .html extension will compile using the excellent ngtemplate-loader parser in templates.js.

This works great.

Now comes the tricky part, which is to build all require () 'd with webpack with .scss or .css extension , without using the node | bower in app.css and each stylesheet from node | bower alias to vendor.css file.

I have tried using extract-text-plugin along with split-by-name-webpack-plugin to no avail, either there is a conflict between the two or I am doing something wrong (using .extract on the. Scss loader and the new ExtractTextPlugin ("styles.css ") just didn't produce any file).

At this point, I was almost lost. I would appreciate it if someone would point me in the right direction, I spent a week on this issue, not going anywhere.

Any help is greatly appreciated.