<p dir="auto">Jasmine poses a problem since it relies on injecting variables into the local scope of a module.</p>
<p dir="auto">Here's what I want to accomplish.</p>
<ul dir="auto">
<li>Create my dev/production server bundle as usual in one file</li>
<li>Create a separate bundle for running via Jasmine whose modules can <code class="notranslate">require</code> any module out of the main server bundle.</li>
<li>None of those modules should be duplicated in the test bundle -- it should be able to access the same modules containing the realtime state of the server.</li>
<li>It must work with <code class="notranslate">target: 'node'</code>.  I tried using CommonsChunkPlugin to do this but it doesn't seem to work with <code class="notranslate">target: 'node'</code>?</li>
</ul>
<p dir="auto">Is there a way to do this?</p>
<p dir="auto">I'm using webpack 5 the latest version of webpack it brings many cool features but unfortunately, I got a lot of issues while I trying to load web fonts. I install both of font-awesome 5 and bootstrap icons npm package in my project and include it inside my <code class="notranslate">app.scss</code> when I run <code class="notranslate">npm run build</code> command to create a dist folder a got this error.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/8a74776f7648ca9b0056d9f336b27bdf9786d3592f07c0c2c73c81cd96503407/68747470733a2f2f692e737461636b2e696d6775722e636f6d2f41424d6b702e706e67"><img src="https://camo.githubusercontent.com/8a74776f7648ca9b0056d9f336b27bdf9786d3592f07c0c2c73c81cd96503407/68747470733a2f2f692e737461636b2e696d6775722e636f6d2f41424d6b702e706e67" alt="Image" data-canonical-src="https://i.stack.imgur.com/ABMkp.png" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/a4e553c78c9269119fe4d5cadd67a3adda2cb6ce0de022868bc941043ff9e893/68747470733a2f2f692e737461636b2e696d6775722e636f6d2f76474d4e522e706e67"><img src="https://camo.githubusercontent.com/a4e553c78c9269119fe4d5cadd67a3adda2cb6ce0de022868bc941043ff9e893/68747470733a2f2f692e737461636b2e696d6775722e636f6d2f76474d4e522e706e67" alt="Image" data-canonical-src="https://i.stack.imgur.com/vGMNR.png" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>webpack.config.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const path = require(&quot;path&quot;);
const webpack = require(&quot;webpack&quot;);
const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
const TerserPlugin = require(&quot;terser-webpack-plugin&quot;);
const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;);

module.exports = {
    mode: process.env.NODE_ENV,
    entry: {
        app: [path.resolve(__dirname, &quot;src/js/app.js&quot;), path.resolve(__dirname, &quot;src/scss/app.scss&quot;)],
    },
    output: {
        path: path.resolve(__dirname, &quot;dist&quot;),
        filename: &quot;js/[name].bundle.js&quot;,
        assetModuleFilename: &quot;images/[hash][ext][query]&quot;,
        clean: true,
    },
    devServer: {
        contentBase: path.join(__dirname, &quot;dist&quot;),
        compress: true,
        open: true,
        port: 3000,
    },
    devtool: &quot;source-map&quot;,
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: &quot;babel-loader&quot;,
                    options: {
                        presets: [&quot;@babel/preset-env&quot;],
                        plugins: [&quot;@babel/plugin-proposal-class-properties&quot;],
                        cacheDirectory: true,
                    },
                },
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    process.env.NODE_ENV !== &quot;production&quot; ? &quot;style-loader&quot; : MiniCssExtractPlugin.loader,
                    {
                        loader: &quot;css-loader&quot;,
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: &quot;postcss-loader&quot;,
                        options: {
                            implementation: require(&quot;postcss&quot;),
                            sourceMap: true,
                            postcssOptions: {
                                plugins: [[&quot;postcss-preset-env&quot;, { browsers: &quot;last 2 versions&quot; }]],
                            },
                        },
                    },
                    {
                        loader: &quot;sass-loader&quot;,
                        options: {
                            implementation: require(&quot;sass&quot;),
                            sourceMap: true,
                            sassOptions: {
                                fiber: require(&quot;fibers&quot;),
                                outputStyle: &quot;compressed&quot;,
                            },
                        },
                    },
                ],
            },
            {
                test: /\.(ico|png|svg|jpg|jpeg|gif|svg|webp|tiff)$/i,
                type: &quot;asset/resource&quot;,
                generator: {
                    filename: &quot;images/[name].[hash][ext]&quot;,
                },
            },
            {
                test: /\.(svg|woff|woff2|eot|ttf|otf)$/i,
                type: &quot;asset/inline&quot;,
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, &quot;src/index.html&quot;),
            inject: &quot;body&quot;,
        }),
        new MiniCssExtractPlugin({
            filename: &quot;css/[name].bundle.css&quot;,
            chunkFilename: &quot;css/[id].bundle.css&quot;,
        }),
    ],
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
        splitChunks: {
            chunks: &quot;all&quot;,
        },
        runtimeChunk: {
            name: &quot;runtime&quot;,
        },
    },
    performance: {
        hints: false,
    },
    experiments: {
        asset: true,
    },
};"><pre class="notranslate"><code class="notranslate">const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: process.env.NODE_ENV,
    entry: {
        app: [path.resolve(__dirname, "src/js/app.js"), path.resolve(__dirname, "src/scss/app.scss")],
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].bundle.js",
        assetModuleFilename: "images/[hash][ext][query]",
        clean: true,
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        open: true,
        port: 3000,
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: ["@babel/plugin-proposal-class-properties"],
                        cacheDirectory: true,
                    },
                },
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    process.env.NODE_ENV !== "production" ? "style-loader" : MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            implementation: require("postcss"),
                            sourceMap: true,
                            postcssOptions: {
                                plugins: [["postcss-preset-env", { browsers: "last 2 versions" }]],
                            },
                        },
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            implementation: require("sass"),
                            sourceMap: true,
                            sassOptions: {
                                fiber: require("fibers"),
                                outputStyle: "compressed",
                            },
                        },
                    },
                ],
            },
            {
                test: /\.(ico|png|svg|jpg|jpeg|gif|svg|webp|tiff)$/i,
                type: "asset/resource",
                generator: {
                    filename: "images/[name].[hash][ext]",
                },
            },
            {
                test: /\.(svg|woff|woff2|eot|ttf|otf)$/i,
                type: "asset/inline",
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "src/index.html"),
            inject: "body",
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].bundle.css",
            chunkFilename: "css/[id].bundle.css",
        }),
    ],
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
        splitChunks: {
            chunks: "all",
        },
        runtimeChunk: {
            name: "runtime",
        },
    },
    performance: {
        hints: false,
    },
    experiments: {
        asset: true,
    },
};
</code></pre></div>
<p dir="auto"><strong>src/scss/app.scss</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@import &quot;~bootstrap-icons/font/bootstrap-icons&quot;;

$fa-font-path: &quot;@fortawesome/fontawesome-free/webfonts&quot;;

@import &quot;~@fortawesome/fontawesome-free/scss/fontawesome&quot;;
@import &quot;~@fortawesome/fontawesome-free/scss/solid&quot;;
@import &quot;~@fortawesome/fontawesome-free/scss/brands&quot;;
@import &quot;~@fortawesome/fontawesome-free/scss/regular&quot;;"><pre class="notranslate"><code class="notranslate">@import "~bootstrap-icons/font/bootstrap-icons";

$fa-font-path: "@fortawesome/fontawesome-free/webfonts";

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
</code></pre></div>
<p dir="auto">I try to find how to fix this issue by locking for other example but I didn't find anything useful.</p>