webpack config for karma

webpack config for karma.js

const { resolve } = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { getIfUtils, removeEmpty } = require("webpack-config-utils");
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const config = require("./config");
const rootResolve = path => resolve(__dirname, path);
const { ifProduction, ifNotProduction, ifDevelopment /*, ifTesting */ } = getIfUtils(process.env.NODE_ENV, [
    "production",
    "testing",
    "development",
]);
const ifIsExport = (trueVal, falseVal) => (process.env.IS_EXPORT === "true" ? trueVal : falseVal);
const styleSourceMap = ifProduction(false, config.cssSourceMap);
const generateStyleLoaders = (...loaders) => [
    ifIsExport(MiniCssExtractPlugin.loader, ifDevelopment("style-loader", MiniCssExtractPlugin.loader)),
    ...loaders.map(loader => {
        if (loader === "sass-loader") {
            return {
                loader,
                options: {
                    sourceMap: styleSourceMap,
                    data: `
                        @import "~@knowbly/tools-global";
                    `,
                },
            };
        }
        return {
            loader,
            options: {
                sourceMap: styleSourceMap,
            },
        };
    }),
];

const webpackTestingConfig = {
    mode: "development",
    context: rootResolve("src"),
    devtool: "inline-source-map",
    stats: {
        colors: true,
        children: false,
        chunks: false,
        chunkModules: false,
        modules: false,
    },
    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
            "lodash-es": ifNotProduction("lodash", "lodash-es"),
            "vue$": "vue/dist/vue.esm.js",
            "src": rootResolve("src"),
            "<src>": rootResolve("src"),
            "<lib>": rootResolve("src/lib"),
            "static": rootResolve("static"),
            "<static>": rootResolve("static"),
            "assets": rootResolve("src/assets"),
            "<assets>": rootResolve("src/assets"),
            "components": rootResolve("src/components"),
            "<components>": rootResolve("src/components"),
            "@sharedComponents": rootResolve("src/lib/sharedComponents"),
            "@": rootResolve("src/lib/sharedComponents/src"),
            "@commenting": rootResolve("src/lib/commenting/src/index.js"),
            "@emojiPicker": rootResolve("src/lib/emojiPicker/src/index.js"),
            "@notifications": rootResolve("src/lib/notifications/src/index.js"),
        },
        modules: [rootResolve("node_modules")],
    },
    module: {
        noParse: [
            /rootResolve("node_modules")/,
            /components[\/|\\]widgets[\/|\\].*[\/|\\]video\.js/,
            /components[\/|\\]courses[\/|\\].*[\/|\\]video\.js/,
        ],
        rules: removeEmpty([
            {
                test: /\.js$/,
                exclude: removeEmpty([
                    /node_modules\/(?!(element-ui|@knowbly\/components|debug|file-type|strip-ansi|ansi-regex)).*/,
                    ifNotProduction(/components\/widgets\/framework\/build/),
                    ifNotProduction(/components\/course\/framework\/build/),
                ]),
                loader: "babel-loader",
                options: {
                    // cacheDirectory: ifDevelopment(true, false),
                    plugins: removeEmpty([ifDevelopment("lodash")]),
                },
            },
            {
                test: /\.vue$/,
                loader: "vue-loader",
                exclude: removeEmpty([
                    /node_modules\/(?!(element-ui|@knowbly\/components|debug|file-type|strip-ansi|ansi-regex)).*/,
                    ifNotProduction(/components\/widgets\/framework\/build/),
                    ifNotProduction(/components\/course\/framework\/build/),
                ]),
                options: {
                    loaders: {
                        css: generateStyleLoaders("css-loader", "postcss-loader"),
                        scss: generateStyleLoaders("css-loader", "postcss-loader", "sass-loader"),
                    },
                    transformToRequire: {
                        video: "src",
                        source: "src",
                        img: "src",
                        image: "xlink:href",
                    },
                },
            },
            {
                test: /\.css$/,
                use: generateStyleLoaders("css-loader", "postcss-loader"),
            },
            {
                test: /\.scss$/,
                use: generateStyleLoaders("css-loader", "postcss-loader", "sass-loader"),
            },
            {
                test: /\.(png|jpe?g|gif)(\?.*)?$/,
                loader: "file-loader",
                options: {
                    name: ifProduction(`${config.assetsSubDirectory}/img/[name].[hash:8].[ext]`, "[name].[ext]"),
                },
            },
            {
                test: /\.svg(\?v=\d+.\d+.\d+)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    mimetype: "image/svg+xml",
                    name: ifProduction(`${config.assetsSubDirectory}/img/[name].[hash:8].[ext]`, "[name].[ext]"),
                },
            },
            {
                test: /\.eot(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    mimetype: "application/vnd.ms-fontobject",
                    name: ifProduction(`${config.assetsSubDirectory}/fonts/[name].[hash:8].[ext]`, "[name].[ext]"),
                },
            },
            {
                test: /\.otf(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    mimetype: "font/opentype",
                    name: ifProduction(`${config.assetsSubDirectory}/fonts/[name].[hash:8].[ext]`, "[name].[ext]"),
                },
            },
            {
                test: /\.ttf(\?v=\d+.\d+.\d+)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    mimetype: "application/octet-stream",
                    name: ifProduction(`${config.assetsSubDirectory}/fonts/[name].[hash:8].[ext]`, "[name].[ext]"),
                },
            },
            {
                test: /\.woff(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    mimetype: "application/font-woff",
                    name: ifProduction(`${config.assetsSubDirectory}/fonts/[name].[hash:8].[ext]`, "[name].[ext]"),
                },
            },
            {
                test: /\.woff2(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    mimetype: "application/font-woff2",
                    name: ifProduction(`${config.assetsSubDirectory}/fonts/[name].[hash:8].[ext]`, "[name].[ext]"),
                },
            },
            {
                test: /\.json$/,
                loader: "json-loader",
                type: "javascript/auto",
            },
            {
                test: /\.txt$/,
                loader: "raw-loader",
            },
        ]),
    },
    plugins: removeEmpty([
        new webpack.DefinePlugin({
            "process.env": "'testing'",
        }),
        new MiniCssExtractPlugin({
            filename: ifProduction(
                `${config.assetsSubDirectory}/css/bundle.[name].[contenthash:8].css`,
                "bundle.[name].css",
            ),
            chunkFilename: ifProduction(
                `${config.assetsSubDirectory}/css/chunk.[name].[contenthash:8].css`,
                "bundle.[name].css",
            ),
        }),
        // enable HMR globally
        ifDevelopment(new webpack.HotModuleReplacementPlugin()),
        // new BundleAnalyzerPlugin(),
        // use en lang in element-ui components
        new webpack.NormalModuleReplacementPlugin(
            /element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/,
            "element-ui/lib/locale/lang/en",
        ),
        new webpack.NormalModuleReplacementPlugin(
            /element-ui[\/\\]src[\/\\]locale[\/\\]lang[\/\\]zh-CN/,
            "element-ui/src/locale/lang/en",
        ),
        // keep these plugins at the end
        ifDevelopment(
            new LodashModuleReplacementPlugin({
                collections: true,
                paths: true,
                shorthands: true,
                caching: true,
                cloning: true,
            }),
        ),
        new VueLoaderPlugin(),
    ]),
    node: {
        fs: "empty",
        net: "empty",
        tls: "empty",
        module: "empty",
    },
    output: {
        publicPath: config.assetsPublicPath,
        filename: ifProduction(`${config.assetsSubDirectory}/js/bundle.[name].[chunkhash:8].js`, "bundle.[name].js"),
        chunkFilename: ifProduction(`${config.assetsSubDirectory}/js/chunk.[name].[chunkhash:8].js`, "chunk.[name].js"),
        path: config.assetsRoot,
        pathinfo: ifNotProduction(),
    },
    // entry: {
    //     app: resolve(__dirname, "src/main.js")
    // }
};

module.exports = webpackTestingConfig;