Issue 1:
Jasmine poses a problem since it relies on injecting variables into the local scope of a module.

Here's what I want to accomplish.

Create my dev/production server bundle as usual in one file

Create a separate bundle for running via Jasmine whose modules can require any module out of the main server bundle.

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.

It must work with target: 'node'. I tried using CommonsChunkPlugin to do this but it doesn't seem to work with target: 'node'?

Is there a way to do this?

Issue 2:
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 app.scss when I run npm run build command to create a dist folder a got this error.

webpack.config.js

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,
},
};

src/scss/app.scss

@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";

I try to find how to fix this issue by locking for other example but I didn't find anything useful.