webpack.config.js

const path = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');
const cssnano = require('cssnano');

const { NoEmitOnErrorsPlugin } = require('webpack');
//const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
const GlobCopyWebpackPlugin = "";
const BaseHrefWebpackPlugin = "";
//const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');

const nodeModules = path.join(process.cwd(), 'node_modules');
const entryPoints = ["inline", "polyfills", "sw-register", "styles", "vendor", "main"];
const minimizeCss = false;
const baseHref = "";
const deployUrl = "";
const postcssPlugins = function ()
{
    // safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
    const importantCommentRe = /@preserve|@license|[@#]\s*source(?:Mapping)?URL|^!/i;
    const minimizeOptions = {
        autoprefixer: false,
        safe: true,
        mergeLonghand: false,
        discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
    };
    return [
        postcssUrl({
            url: (URL) =>
            {
                // Only convert root relative URLs, which CSS-Loader won't process into require().
                if (!URL.startsWith('/') || URL.startsWith('//'))
                {
                    return URL;
                }
                if (deployUrl.match(/:\/\//))
                {
                    // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
                    return `${deployUrl.replace(/\/$/, '')}${URL}`;
                }
                else if (baseHref.match(/:\/\//))
                {
                    // If baseHref contains a scheme, include it as is.
                    return baseHref.replace(/\/$/, '') +
                        `/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
                }
                else
                {
                    // Join together base-href, deploy-url and the original URL.
                    // Also dedupe multiple slashes into single ones.
                    return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
                }
            }
        }),
        autoprefixer(),
    ].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
};




module.exports = {
    "devtool": "source-map",
    "resolve": {
        "extensions": [
            ".ts",
            ".js"
        ],
        "modules": [
            "./node_modules"
        ]
    },
    "resolveLoader": {
        "modules": [
            "./node_modules"
        ]
    },
    "entry": {
        "main": [
            "./ClientApp\\boot.ts"
        ],
        "polyfills": [
            "./ClientApp\\polyfills.ts"
        ],
        "styles": [
            "./ClientApp\\styles.css"
        ]
    },
    "output": {
        "path": path.join(process.cwd(), "wwwroot/dist"),
        "filename": "[name].bundle.js",
        "chunkFilename": "[id].chunk.js",
        "publicPath": "/app/"
    },
    "module": {
        "rules": [
            {
                "enforce": "pre",
                "test": /\.js$/,
                "loader": "source-map-loader",
                "exclude": [
                    /\/node_modules\//
                ]
            },
            {
                "test": /\.json$/,
                "loader": "json-loader"
            },
            {
                "test": /\.html$/,
                "loader": "raw-loader"
            },
            {
                "test": /\.(eot|svg)$/,
                "loader": "file-loader?name=[name].[hash:20].[ext]"
            },
            {
                "test": /\.(jpg|png|gif|otf|ttf|woff|woff2|cur|ani)$/,
                "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
            },
            {
                "exclude": [
                    path.join(process.cwd(), "ClientApp\\styles.css")
                ],
                "test": /\.css$/,
                "use": [
                    "exports-loader?module.exports.toString()",
                    {
                        "loader": "css-loader",
                        "options": {
                            "sourceMap": false,
                            "importLoaders": 1
                        }
                    },
                    {
                        "loader": "postcss-loader",
                        "options": {
                            "ident": "postcss",
                            "plugins": postcssPlugins
                        }
                    }
                ]
            },
            {
                "exclude": [
                    path.join(process.cwd(), "ClientApp\\styles.css")
                ],
                "test": /\.scss$|\.sass$/,
                "use": [
                    "exports-loader?module.exports.toString()",
                    {
                        "loader": "css-loader",
                        "options": {
                            "sourceMap": false,
                            "importLoaders": 1
                        }
                    },
                    {
                        "loader": "postcss-loader",
                        "options": {
                            "ident": "postcss",
                            "plugins": postcssPlugins
                        }
                    },
                    {
                        "loader": "sass-loader",
                        "options": {
                            "sourceMap": false,
                            "precision": 8,
                            "includePaths": []
                        }
                    }
                ]
            },
            {
                "exclude": [
                    path.join(process.cwd(), "ClientApp\\styles.css")
                ],
                "test": /\.less$/,
                "use": [
                    "exports-loader?module.exports.toString()",
                    {
                        "loader": "css-loader",
                        "options": {
                            "sourceMap": false,
                            "importLoaders": 1
                        }
                    },
                    {
                        "loader": "postcss-loader",
                        "options": {
                            "ident": "postcss",
                            "plugins": postcssPlugins
                        }
                    },
                    {
                        "loader": "less-loader",
                        "options": {
                            "sourceMap": false
                        }
                    }
                ]
            },
            {
                "exclude": [
                    path.join(process.cwd(), "ClientApp\\styles.css")
                ],
                "test": /\.styl$/,
                "use": [
                    "exports-loader?module.exports.toString()",
                    {
                        "loader": "css-loader",
                        "options": {
                            "sourceMap": false,
                            "importLoaders": 1
                        }
                    },
                    {
                        "loader": "postcss-loader",
                        "options": {
                            "ident": "postcss",
                            "plugins": postcssPlugins
                        }
                    },
                    {
                        "loader": "stylus-loader",
                        "options": {
                            "sourceMap": false,
                            "paths": []
                        }
                    }
                ]
            },
            {
                "include": [
                    path.join(process.cwd(), "ClientApp\\styles.css")
                ],
                "test": /\.css$/,
                "loaders": ExtractTextPlugin.extract({
                    "use": [
                        {
                            "loader": "css-loader",
                            "options": {
                                "sourceMap": false,
                                "importLoaders": 1
                            }
                        },
                        {
                            "loader": "postcss-loader",
                            "options": {
                                "ident": "postcss",
                                "plugins": postcssPlugins
                            }
                        }
                    ],
                    "fallback": "style-loader",
                    "publicPath": ""
                })
            },
            {
                "include": [
                    path.join(process.cwd(), "ClientApp\\styles.css")
                ],
                "test": /\.scss$|\.sass$/,
                "loaders": ExtractTextPlugin.extract({
                    "use": [
                        {
                            "loader": "css-loader",
                            "options": {
                                "sourceMap": false,
                                "importLoaders": 1
                            }
                        },
                        {
                            "loader": "postcss-loader",
                            "options": {
                                "ident": "postcss",
                                "plugins": postcssPlugins
                            }
                        },
                        {
                            "loader": "sass-loader",
                            "options": {
                                "sourceMap": false,
                                "precision": 8,
                                "includePaths": []
                            }
                        }
                    ],
                    "fallback": "style-loader",
                    "publicPath": ""
                })
            },
            {
                "include": [
                    path.join(process.cwd(), "ClientApp\\styles.css")
                ],
                "test": /\.less$/,
                "loaders": ExtractTextPlugin.extract({
                    "use": [
                        {
                            "loader": "css-loader",
                            "options": {
                                "sourceMap": false,
                                "importLoaders": 1
                            }
                        },
                        {
                            "loader": "postcss-loader",
                            "options": {
                                "ident": "postcss",
                                "plugins": postcssPlugins
                            }
                        },
                        {
                            "loader": "less-loader",
                            "options": {
                                "sourceMap": false
                            }
                        }
                    ],
                    "fallback": "style-loader",
                    "publicPath": ""
                })
            },
            {
                "include": [
                    path.join(process.cwd(), "ClientApp\\styles.css")
                ],
                "test": /\.styl$/,
                "loaders": ExtractTextPlugin.extract({
                    "use": [
                        {
                            "loader": "css-loader",
                            "options": {
                                "sourceMap": false,
                                "importLoaders": 1
                            }
                        },
                        {
                            "loader": "postcss-loader",
                            "options": {
                                "ident": "postcss",
                                "plugins": postcssPlugins
                            }
                        },
                        {
                            "loader": "stylus-loader",
                            "options": {
                                "sourceMap": false,
                                "paths": []
                            }
                        }
                    ],
                    "fallback": "style-loader",
                    "publicPath": ""
                })
            },
            {
                "test": /\.ts$/,
                "loader": "@ngtools/webpack"
            }
        ]
    },
    "plugins": [
        new NoEmitOnErrorsPlugin(),
        //new GlobCopyWebpackPlugin({
        //    "patterns": [
        //        "assets",
        //        "favicon.ico"
        //    ],
        //    "globOptions": {
        //        "cwd": "H:\\Projects\\MCYA_Registration2\\MCYSA\\ClientApp",
        //        "dot": true,
        //        "ignore": "**/.gitkeep"
        //    }
        //}),
        new ProgressPlugin(),
        new HtmlWebpackPlugin({
            "template": "./ClientApp\\index.html",
            "filename": "./index.html",
            "hash": false,
            "inject": true,
            "compile": true,
            "favicon": false,
            "minify": false,
            "cache": true,
            "showErrors": true,
            "chunks": "all",
            "excludeChunks": [],
            "title": "Webpack App",
            "xhtml": true,
            "chunksSortMode": function sort(left, right)
            {
                let leftIndex = entryPoints.indexOf(left.names[0]);
                let rightindex = entryPoints.indexOf(right.names[0]);
                if (leftIndex > rightindex)
                {
                    return 1;
                }
                else if (leftIndex < rightindex)
                {
                    return -1;
                }
                else
                {
                    return 0;
                }
            }
        }),
        //new BaseHrefWebpackPlugin({}),
        //new CommonsChunkPlugin({
        //    "name": "inline",
        //    "minChunks": null
        //}),
        //new CommonsChunkPlugin({
        //    "name": "vendor",
        //    "minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
        //    "chunks": [
        //        "main"
        //    ]
        //}),
        //new CommonsChunkPlugin({
        //    optimization: {
        //        runtimeChunk: "single", //enable runtime chunk
        //        splitChuncks: {
        //            cacheGroups: {
        //                vendor: {
        //                    test: /[\\/]node_modules[\\/]/,
        //                    name: "vendor",
        //                    chunks: "all"
        //                }
        //            }
        //        }
        //    }
        //}),

    new ExtractTextPlugin({
            "filename": "[name].bundle.css",
            "disable": true
        })
        //new AotPlugin({
        //    "mainPath": "main.ts",
        //    "hostReplacementPaths": {
        //        "environments\\environment.ts": "environments\\environment.ts"
        //    },
        //    "exclude": [],
        //    "tsConfigPath": "ClientApp\\tsconfig.app.json",
        //    "skipCodeGeneration": true
        //})
    ],
    "node": {
        "fs": "empty",
        "global": true,
        "crypto": "empty",
        "tls": "empty",
        "net": "empty",
        "process": true,
        "module": false,
        "clearImmediate": false,
        "setImmediate": false
    },
    "devServer": {
        "historyApiFallback": true
    }
};