How to prevent a directory from being copied in webpack within Vue CLI

Question

How to prevent a directory from being copied in webpack within Vue CLI

Currently, I am working on a Vue3 project created using Vue CLI 5.0.1

In my setup, there is a public folder that contains static assets necessary for serving the application. However, this folder is quite heavy, around 1GB in size. Whenever I run the npm run serve command, the build process gets stuck at

[92%] sealing (asset processing copy-webpack-plugin)

.

To resolve this issue, I need to exclude the public/resources directory from the copy-webpack-plugin.

I attempted to make this configuration change by adding the following code snippet to my vue.config.js file:

    chainWebpack: (config) => {
    config.plugin("copy").tap(([options]) => {
      options[0].ignore.push("resources/**");
      return [options];
    });
 }

Unfortunately, this resulted in an error message:

 ERROR  TypeError: Cannot read property 'ignore' of undefined

javascript vue.js vue-cli

Answer 1

Answer №1

This solution can be found on Github.

Make sure to make the necessary changes in your code due to a recent update:

chainWebpack: (config) => {
  config.plugin("copy").tap(([options]) => {
    options.patterns[0].globOptions.ignore.push("resources/**");
    return [options];
  });
}

Answer 2

This solution can be found on Github.

Make sure to make the necessary changes in your code due to a recent update:

chainWebpack: (config) => {
  config.plugin("copy").tap(([options]) => {
    options.patterns[0].globOptions.ignore.push("resources/**");
    return [options];
  });
}

Answer 3

Answer №2

I explored various options suggested online but none of them helped in excluding files during the build process by editing vue.config.js.

Eventually, I resorted to using rimraf to delete the unwanted files from the dist directory after the build:

To do this, simply run the following command in your terminal:

npm install rimraf --save-dev

Then, add the following configuration in your package.json file:

"scripts": {
 "build": "vue-cli-service build && npm run remove-files",
 "remove-files": "rimraf dist/somefile.js dist/anotherfile.css"
}

Answer 4

I explored various options suggested online but none of them helped in excluding files during the build process by editing vue.config.js.

Eventually, I resorted to using rimraf to delete the unwanted files from the dist directory after the build:

To do this, simply run the following command in your terminal:

npm install rimraf --save-dev

Then, add the following configuration in your package.json file:

"scripts": {
 "build": "vue-cli-service build && npm run remove-files",
 "remove-files": "rimraf dist/somefile.js dist/anotherfile.css"
}

How to prevent a directory from being copied in webpack within Vue CLI

Answer №1

Answer №2

Similar questions

Angular modules are designed to repeat chunks of code in a

Updating ng-model with the values from a property in a collection in AngularJS

Is it possible to simultaneously send a JSON object and render a template using NodeJS and AngularJS?

Sending a request to a JSON file using Ajax

Efficiently incorporate a set of fields into a form and automatically produce JSON when submitted

What is the best way to retrieve the current directory of the executed javascript file?

Having trouble locating the OBJ file in your Three.js WebGL project?

Some elements in the DOM appear to not be rendering even though they are present in the HTML source code

Hide and show submenus with jQuery while ensuring that the initial submenu remains visible, along with the main menu

Suggestion for implementing numerous ajax countdown timers (one call per second)

Internal server error encountered while making an AJAX call using AngularJS routing

The contents of the $localStroage array do not align with those of the $scope array

Following the completion of the $axios.post request, a redirect to a different page is encountering issues

StopPropagation() method in Ng-class not functioning properly in Angular for parent element

Launching a centered pop-up window to display a submitted form message

Tips for updating the background color of a specific row

How to Retrieve the Value of <input type=date> Using TypeScript

Issue with displaying the Bootstrap-select DropDownList

"Exploring the wonders of hosting Vue js Single Page

What is the equivalent of {...props} in React for destructuring props in Vue?