featuretimeline/webpack.config.js

const webpack = require("webpack");
const path = require("path");
//const PrettierPlugin = require("prettier-webpack-plugin");

/*
 * We've enabled UglifyJSPlugin for you! This minifies your app
 * in order to load faster and run less javascript.
 *
 * https://github.com/webpack-contrib/uglifyjs-webpack-plugin
 *
 */

const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

/*
 * We've enabled ExtractTextPlugin for you. This allows your app to
 * use css modules that will be moved into a separate CSS file instead of inside
 * one of your module entries!
 *
 * https://github.com/webpack-contrib/extract-text-webpack-plugin
 *
 */

//const ExtractTextPlugin = require('extract-text-webpack-plugin');
const mode = process.env.NODE_ENV || "development";
const sourcemap = mode === "development";
const plugins = [
    new CopyWebpackPlugin([
        {
            from: "./node_modules/vss-web-extension-sdk/lib/VSS.SDK.min.js",
            to: "libs/VSS.SDK.min.js"
        },
        {
            from: "./node_modules/react/umd/react.production.min.js",
            to: "react.js"
        },
        {
            from: "./node_modules/react-dom/umd/react-dom.production.min.js",
            to: "react-dom.js"
        },
        {
            from: "./src/FeatureTimeline/featuretimeline.html",
            to: "./"
        },
        {
            from: "./src/EpicRoadmap/EpicRoadmap.html",
            to: "./"
        },
        {
            from: "./src/PortfolioPlanning/PortfolioPlanning.html",
            to: "./"
        },
        {
            from: "./src/PortfolioPlanning/AddToPlanAction.html",
            to: "./"
        },
        {
            from: "./src/PortfolioPlanning/SelectPlanDialog.html",
            to: "./"
        },
        {
            from: "./images",
            to: "./images"
        },
        {
            from: "./details.md",
            to: "details.md"
        }
    ])
];

if (mode !== "development") {
    plugins.unshift(new UglifyJSPlugin());
    plugins.unshift(
        new BundleAnalyzerPlugin({
            analyzerMode: "static",
            generateStatsFile: true
        })
    );
    //plugins.unshift(new PrettierPlugin());
}
module.exports = {
    entry: {
        FeatureTimeline: "./src/FeatureTimeline/FeatureTimeline.tsx",
        EpicRoadmap: "./src/EpicRoadmap/EpicRoadmap.tsx",
        PortfolioPlanning: "./src/PortfolioPlanning/PortfolioPlanning.tsx",
        AddToPlanAction: "./src/PortfolioPlanning/AddToPlanAction.tsx",
        SelectPlanDialog: "./src/PortfolioPlanning/SelectPlanDialog.tsx"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist"),
        libraryTarget: "umd",
        library: "[name]"
    },
    devtool: "source-map",
    mode: mode,
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"],
        alias: {
            "azure-devops-extension-sdk": path.resolve("node_modules/azure-devops-extension-sdk")
        }
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "ts-loader"
                    }
                ]
            },
            {
                enforce: "pre",
                test: /\.js$/,
                use: [
                    {
                        loader: "source-map-loader"
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(scss)$/,

                use: [
                    {
                        loader: "style-loader",
                        options: {
                            sourcemap: sourcemap
                        }
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourcemap: sourcemap
                        }
                    },
                    {
                        loader: "azure-devops-ui/buildScripts/css-variables-loader"
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourcemap: sourcemap
                        }
                    }
                ]
            },
            {
                test: /\.woff$/,
                use: [
                    {
                        loader: "base64-inline-loader"
                    }
                ]
            }
        ]
    },
    externals: [
        {
            react: true,
            "react-dom": true
        },
        /^VSS\//,
        /^TFS\//
    ],

    plugins: plugins
};