Optimizing your webpack configuration to fully bundle the assets folder

Currently, I am in the process of developing a Web Application utilizing the MEAN stack.

For bundling my files, I have implemented webpack.

Within my project, there are two main folders: 1.public/assets (which contains subfolders like CSS, js, etc. housing various JS and CSS files) and 2.client (where I keep my AngularJS code such as controllers.js and services.js).

Webpack is also being used to bundle my client code.

const path = require('path');
const glob = require('glob');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const outputDirectory = 'dist';

module.exports = {
  mode: 'development',
  target: 'web',
  entry: {
    app: glob.sync('./client/*.js'),
  },
  output: {
    path: path.resolve(__dirname, outputDirectory),
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['env', 'stage-0'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
        loader: 'url-loader?limit=100000',
      },
    ],
  },
  devServer: {
    port: 3005,
    open: false,
    disableHostCheck: true,
    proxy: {
      '/': 'http://localhost:8005',
    },
  },
  plugins: [
    new CleanWebpackPlugin([outputDirectory]),
  ],

};

My current focus is on bundling my client folder and compiling it into app.bundle.js. However, I am unsure about how to compile the assets folder.

Important Note: I am utilizing AngularJS v1 in this project.

Answer №1

Webpack's process begins with every entry point (multiple entry points can be used) and generates a dependency graph. Assets and files get included in the dependency graph when they are imported into the application using require and import statements.

The relationship between your client folder and public/assets folder, and whether they are connected, is not fully clarified in your query. However, if none of the files in your client folder require or import any assets from your public/assets folder, they will not be part of webpack's dependency graph and will not be transpiled or bundled.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to handle nested div elements and triggering a click event only once when the inner div is clicked

I have a situation where I have nested divs. When the inner div (closeme) is clicked, I do not want the click event of the outer div (container) to be triggered. How can I achieve this? html <div id="container"> content <div id="closeme">< ...

Unable to minimize or hide the ace editor widget with Cypress

Today marks the beginning of my journey into posting on this platform, and I am eager to get it right. In my current project using Cypress for writing integration tests, I encountered a challenge while attempting to click on an Ace editor widget within a ...

The dropdown on my website is malfunctioning

There seems to be an issue with my dropdown button. Previously, it only appeared when clicking on a specific part of the button. I attempted to resolve this problem but unfortunately, the dropdown no longer works at all and I am unable to revert my changes ...

NodeJS domain error handling failing to catch ReferenceError exceptions

I'm currently facing some challenges with domains in NodeJS. I've set up middleware functions to wrap every call in my web application within a domain in order to capture errors, process them, and return informative error messages. While this se ...

What is the best way to loop through a JSON array in JavaScript?

Here is the JSON data I am working with: let jsonData = { "result": [ [ { "PARAM 1": [ { "field": "firstName", "message ...

Making a POST request with ajax in Django

I encountered some difficulties while attempting to send a POST request using ajax in Django. I have searched various resources, but have not yet found a solution. Below is the javascript code that I am using, following this guide: $.ajax({ url: &apo ...

Oops, it seems like there was an issue with NextJS 13 Error. The createContext functionality can only be used in Client Components. To resolve this, simply add the "use client" directive at the

**Issue: The error states that createContext only works in Client Components and suggests adding the "use client" directive at the top of the file to resolve it. Can you explain why this error is occurring? // layout.tsx import Layout from "./componen ...

Disseminate several outcomes using a Discord bot

My first experience using stackoverflow was to seek help regarding a bot created to post results whenever a new episode of a show in the search list is added on nyaa.si. The issue I'm facing is that the bot posts the same episode multiple times within ...

The issue with updating values in the jQuery UI datepicker persists

When using the jquery datepicker ui, you may notice that the value attributes of the associated html fields do not update immediately. For example: http://jsfiddle.net/4tXP4/ Check out this link for more details: http://jqueryui.com/demos/datepicker/al ...

How can you identify the resume of a web application once you return from opening the camera?

I'm working on a web application that utilizes the camera by following steps from this solution: How to access a mobile phone's camera using a web app? However, I am trying to figure out how to implement a callback function once the user return ...

What steps can I take to ensure that my React child components will render successfully, even if a prop is absent

TLDR; Seeking solution to render child components in React even if a property of this.props is missing. My React app utilizes Yahoo's Fluxible and fetches data from a Wordpress site using WP REST API. Sometimes, the API may return incomplete data cau ...

Is it possible to assign default values to optional properties in JavaScript?

Here is an example to consider: interface Parameters { label: string; quantity?: number; } const defaultSettings = { label: 'Example', quantity: 10, }; function setup({ label, quantity }: Parameters = { ...defaultSettings }) { ...

AngularJS Login Popup with SpringSecurity

I have successfully integrated spring security with my AngularJS webpage utilizing Rest API. However, I am facing an issue where every time I attempt to log in using the rest api from my customized login page, it prompts me for the login credentials in a p ...

Uncaught TypeError occurs in AngularJS and Mocha testing when the function (window.beforeEach || window.setup) is not defined

I've been experimenting with testing angular js using mocha in my meteor application. After installing ngMock and injecting it into my module, I encountered an issue right when starting my app. Regardless of whether I installed ngMock from atmosphere ...

What is the best way to retrieve the Axios response using Express?

I've recently delved into working with Express and I'm currently struggling with making an Axios request using route parameters, and then updating some local variables based on the response. Here's a snippet of what I've been working on ...

When creating a new instance of a class, I make sure to use the

I am facing an issue when trying to call a function from ClassA within my mainClass, and vice versa. I have attempted using .bind() and .call(), but it only works when I use .bind(this) or .call(this) on functions, not when I try to instantiate a new class ...

Tips on handling jsonp responses in CakePHP without using the .json extension

When working with CakePHP, the framework determines the data type to return by either checking for the presence of the .json extension in the URL or examining the Accepts HTTP header. It becomes a bit trickier when dealing with JSONP, as it doesn't a ...

Sending data to API using AngularJS Http Post

Upon clicking "Add new User", a modal pop-up will appear with a form containing a text field and a checkbox. However, upon clicking the create button, the data is not being posted to the API and the modal pop-up remains open without closing. I would like ...

To achieve proper display of multiple boxes, it is essential for each box to be

My current approach involves adding boxes to the scene based on specific dimensions for height, width, and depth, and it works perfectly when the boxes are all square. https://i.sstatic.net/HdDSX.png However, the issue arises when I try to use a rectangu ...

Connect ngOptions to an array beyond the current scope

Can the ngOptions be bound to a value that is not within the $scope? I have enums that will be generated as JavaScript code. These enums are not currently part of "the angular domain", but I want to bind an ngOptions to one of the arrays without manually ...