All templates in a separate file

[marekpw]

Hello, first let me thank you for this awesome plugin, it really does help a lot.

While my setup currently works, I was wondering if there's a way to output all required templates into a separate file (templates.js) automatically.

My webpack.config.js: var path = require("path"); var webpack = require("webpack");

module.exports = {
    entry: {
        app: path.resolve(__dirname, 'app/src/app.js'),
        vendors: [
            'angular',
            'angular-ui-router',
            'angular-bootstrap',
            'angular-cookies',
            'angular-slugify',
            'chartjs',
            'tc-angular-chart',
            'angular-breadcrumb',
            'ng-notifications-bar',
            'lodash',
            'restangular',
            'ng-tags-input'
        ]
    },

    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.js'
    },

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

    plugins: [
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
    ],

    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"
            }
        ]
    }
};

As you can see I already have to explicitly define the vendors (which I'd also like to somehow get rid of but that's for another time), so I don't want to get into the same business with templates.

My templates are scattered "randomly" inside the app/src directory, under the component-name/_resources/views/ path if that matters.

Sorry if it doesn't really belong here, I'm new to webpack and there's so many parties that I don't even know who to ask which question :/

[WearyMonkey]

Hi @idiotstrike, sorry there is no inbuilt solution in ngtemplate loader, and I don't think it's in the scope.

What you want to look more into is 'code splitting'. I didn't see anyway to split based on file name (e.g. *.html), but there is this plugin for splitting on path: https://github.com/BohdanTkachenko/webpack-split-by-path

Hope that helps!

[marekpw]

Amazing.

It looks like I'll be able to use this for both my vendors and my views. I can use the split by path plugin to bundle my vendors automatically and split by name to bundle my views.

I had no idea such plugins existed. Sorry for cluttering your own github about this and thanks again, it really does help a lot :<

[WearyMonkey]

Great, no worries :)