Order of execution of processes using webpack

[krayush]

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
Currently the order of execution is not as per the expectations. What I want is to run sprites and webfont tasks first and then want them to be processed by sass-loader (to convert them from scss to css). And in the end move all the files to dist directory. But the order is not correct. First the copy task starts and as it is not able to find the files, it fails

If the current behavior is a bug, please provide the steps to reproduce.
Following webpack config is used for this:

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

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;
var AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
var ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
var DefinePlugin = require('webpack/lib/DefinePlugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var AssetsPlugin = require('assets-webpack-plugin');
var CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
var ngcWebpack = require('ngc-webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlElementsPlugin = require('./config/html-elements-plugin');
var WebFontPlugin = require('webpack-webfont/dist/WebfontPlugin').default;
var SpriteSmithPlugin = require('webpack-spritesmith');
var dateTime = new Date().getTime();

var getBasePath = function(dir) {
    return path.resolve(__dirname, dir);
};
var METADATA = {
    title: 'TEST PROJECT',
    baseUrl: '/',
    isDevServer: true,
    HMR: false
};

module.exports = function () {
    return {
        devtool: 'source-map',
        entry: {
            'polyfills': './src/polyfills.browser.ts',
            'main': './src/main.browser.ts',
            // use [x].bundle for all the css files to name them: [x].bundle.css
            'app.bundle': "./src/assets/styles/main.scss"
        },
        output: {
            //filename: '[name].[chunkhash].bundle.js',
            filename: '[name].bundle.js',
            path: getBasePath('dist'),
            sourceMapFilename: '[file].map',
            chunkFilename: "[id].chunk.js",
            //needed only in dev mode
            library: 'ac_[name]',
            libraryTarget: 'var'
        },
        resolve: {
            extensions: ['.ts', '.js', '.json'],
            modules: [
                getBasePath('src'),
                getBasePath('node_modules')
            ]
        },
        // Note: Loaders load from bottom to top and right to left
        module: {
            rules: [{
                test: /\.ts$/,
                use: [{
                    // Required for lazy loading of modules
                    loader: 'ng-router-loader',
                    options: {
                        loader: 'async-import',
                        genDir: 'compiled',
                        aot: false
                    }
                }, {
                    // TypeScript compiler
                    loader: 'awesome-typescript-loader',
                    options: {
                        configFileName: 'tsconfig.webpack.json'
                    }
                }, {
                    // Embedding the HTML and CSS files
                    loader: 'angular2-template-loader'
                }, {
                    loader: 'tslint-loader',
                    options: {
                        configFile: 'tslint.json'
                    }
                }]
            }, {
                test: /\.(jpg|png|gif)$/,
                use: 'file-loader'
            }, {
                test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
                use: 'file-loader'
            }, {
                test: /\.css$/,
                use: ['to-string-loader', 'css-loader'],
                exclude: [getBasePath('src/styles')]
            }, {
                test: /\.scss$/,
                use: ['to-string-loader', 'css-loader', 'sass-loader'],
                exclude: [getBasePath('src/styles')]
            }, {
                test: /\.json$/,
                use: 'json-loader'
            }, {
                test: /\.html$/,
                use: 'raw-loader',
                exclude: [path.resolve(__dirname, 'src/index.html')]
            }, {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                }),
                include: [getBasePath('src/styles')]
            }, {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "sass-loader"]
                }),
                include: [getBasePath('src/styles')]
            }]
        },
        plugins: [
            new CheckerPlugin(),
            new WebFontPlugin({
                files: getBasePath('src/assets/custom-icons/**/*.svg'),
                css: true,
                cssFormat: 'scss',
                cssTemplateFontPath: '../fonts/custom-fonts/',
                cssTemplateFontName: "icons",
                fontName: "icons",
                dest: {
                    fontsDir: getBasePath('src/assets/fonts/custom-fonts'),
                    css: getBasePath('src/assets/styles/_icons.scss'),
                }
            }),
            new SpriteSmithPlugin({
                src: {
                    cwd: getBasePath('src/assets/images/sprite-src'),
                    glob: '*.png'
                },
                target: {
                    image: getBasePath('src/assets/images/sprite-dist/olpSprite-' + dateTime + '.png'),
                    css: [[getBasePath('src/assets/styles/_olpSprite.scss'), {
                        format: 'handlebars_based_template'
                    }]]
                },
                customTemplates: {
                    'handlebars_based_template': getBasePath('src/assets/images/sprite-src/sprite-template/template.handlebars')
                },
                apiOptions: {
                    cssImageRef: "../images/sprite-dist/olpSprite-" + dateTime + ".png"
                }
            }),
            new CopyWebpackPlugin([{
                from: getBasePath('src/assets/images/app-images'),
                to: getBasePath('dist/assets/images/app-images')
            }, {
                from: getBasePath('src/assets/images/favicon'),
                to: getBasePath('dist/assets/images/favicon')
            }, {
                from: getBasePath('src/assets/images/sprite-dist'),
                to: getBasePath('dist/assets/images/sprite-dist')
            }, {
                from: getBasePath("node_modules/bootstrap-sass/assets/fonts/bootstrap"),
                to: getBasePath("src/assets/fonts/bootstrap")
            }, {
                from: getBasePath("node_modules/font-awesome/fonts"),
                to: getBasePath("src/assets/fonts/font-awesome")
            }, {
                from: getBasePath('src/assets/fonts'),
                to: getBasePath('dist/assets/fonts')
            }, {
                from: getBasePath('src/assets/styles/main.css'),
                to: getBasePath('dist/assets/styles/main.css')
            }]),
            new CommonsChunkPlugin({
                name: 'polyfills',
                chunks: ['polyfills']
            }),
            // This enables tree shaking of the vendor modules
            new CommonsChunkPlugin({
                name: 'vendor',
                chunks: ['main'],
                minChunks: module => /node_modules/.test(module.resource)
            }),
            // Specify the correct order the scripts will be injected in
            new CommonsChunkPlugin({
                name: ['polyfills', 'vendor'].reverse()
            }),

            new AssetsPlugin({
                path: getBasePath('dist'),
                filename: 'webpack-assets.json',
                prettyPrint: true
            }),
            new DefinePlugin({
                'ENV': JSON.stringify('development'),
                'HMR': METADATA.HMR
            }),
            new DllBundlesPlugin({
                bundles: {
                    polyfills: ['core-js', {
                        name: 'zone.js',
                        path: 'zone.js/dist/zone.js'
                    }, {
                        name: 'zone.js',
                        path: 'zone.js/dist/long-stack-trace-zone.js'
                    }],
                    vendor: [
                        '@angular/platform-browser',
                        '@angular/platform-browser-dynamic',
                        '@angular/core',
                        '@angular/common',
                        '@angular/forms',
                        '@angular/http',
                        '@angular/router',
                        '@angularclass/hmr',
                        'rxjs',
                    ]
                },
                dllDir: path.resolve(__dirname, 'dll'),
                webpackConfig: {
                    devtool: 'cheap-module-source-map'
                }
            }),
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            // location of your src
            // your Angular Async Route paths relative to this root directory
            new ContextReplacementPlugin(
                /angular(\\|\/)core(\\|\/)src(\\|\/)linker/,
                getBasePath('src'), {}
            ),
            new ScriptExtHtmlWebpackPlugin({
                defaultAttribute: 'defer'
            }),
            new ExtractTextPlugin('[name].css'),
            new AddAssetHtmlPlugin([{
                filepath: getBasePath(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`)
            }, {
                filepath: getBasePath(`dll/${DllBundlesPlugin.resolveFile('vendor')}`)
            }]),
            new HtmlWebpackPlugin({
                template: './src/index.html',
                title: METADATA.title,
                chunksSortMode: 'dependency',
                metadata: METADATA,
                inject: 'head'
            }),
            new HtmlElementsPlugin({
                headTags: require('./config/head-config.common')
            }),
            // AOT Compiling
            new ngcWebpack.NgcWebpackPlugin({
                disabled: !false,
                tsConfig: getBasePath('tsconfig.webpack.json'),
                resourceOverride: getBasePath('config/resource-override.js')
            })
        ],
        devServer: {
            port: 8080,
            host: 'localhost',
            historyApiFallback: true,
            watchOptions: {
                aggregateTimeout: 300,
                poll: 1000
            }
        },
        node: {
            global: true,
            crypto: 'empty',
            process: true,
            module: false,
            clearImmediate: false,
            setImmediate: false
        }
    };
};

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
webpack version: 2.2.0
os: mac

[sokra]

webpack is not a task runner.

These plugins are tasks, which is not "webpack-style" and not supported. You can report the issue there, but there is nothing to do on webpack side (and I don't care much).