Tips for stopping Webpack from deleting unrelated files in the output directory

Suppose I compile certain JS assets into dist/static/js:

output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    },

Before executing npm run build, I manually create a file in the /dist/, /static/, and /js/ directories.

But after running npm run build, this specific file gets deleted. The files created within the /static/ and /js/ directories disappear as well. How can I prevent this from occurring?

The structure is based on Vue.js/Webpack boilerplate available at: https://github.com/vuejs-templates/webpack

javascriptwebpackvue.jswebpack-3

Answer №1

Looking at this link, you'll notice the import of a package called rimraf:

const rm = require('rimraf')

This package is crucial for clearing out both your assetsRoot and assetsSubDirectory. It's essential to start with a clean slate when rebuilding from scratch.

Instead of disabling this function, consider moving your files to a different directory or letting your Javascript generate them since the deletion occurs before compilation.

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

In Rails, the Ajax-enabled average rating bar refuses to reload

I've been developing a Ruby on Rails Application featuring a Rating System. The rating system is functioning as expected, and I have successfully implemented ajax functionality. Additionally, I am now looking to display the current average rating in a ...

javascriptruby-on-railsrubyajaxrating

Ways to determine the name of the calling function in an AJAX or XMLHttpRequest request?

I am currently exploring ways to programmatically identify the function name responsible for triggering an Ajax call in JavaScript or jQuery within an existing codebase. As I delve into instrumenting a large existing codebase, I am seeking to pinpoint the ...

javascriptjqueryajaxperformanceinstrumentation

Implementing Twitter Login with Vue, Vuex, and Firebase

Exploring a Twitter login option for my sports social media dashboard project, I followed a helpful tutorial. While I've successfully implemented the HelloWorld component and retained the app.vue and main.js components, I encountered an error stating ...

javascriptfirebasevue.jsauthenticationvue-router

Top strategies for managing fixed datasets

Imagine having a dataset containing country names and their corresponding phone prefixes, like so: var countryPhonePrefixes = [ { 'name': 'Germany', 'prefix': '+49' }, { 'nam ...

javascriptarraysjson

Creating a number of arrays based on the row of a .CSV file can be accomplished in Angular by utilizing the

Implementing an Angular template to read .CSV files and generate a table involves creating two separate files: one for the header and another for the table content. For the header CSV file: header.csv https://i.stack.imgur.com/ojMo6.png For the table da ...

javascriptarraysangulartypescriptcsv

JavaScript: utilizing JSON, implementing dynamic methods for creatures, and utilizing closures for encaps

Apologies for the unclear title, but I am unsure where the issue lies. Therefore, my task is to create a function that generates JavaScript objects from JSON and for fields that start with an underscore, it should create setters and getters. Here is an e ...

javascriptjson

Display Vue component using a string input

Is there a solution to make this non-functioning example work, or is its usage illegal? Vue.component('hello', { template: '<span>Hello world!</span>' }) Vue.component('foo', { data(){ return { ...

javascriptvue.jsvuejs2vue-component

Improving efficiency for handling a vast number of inputs in React applications

Dealing specifically with Material UI, I am faced with the challenge of rendering a large number of inputs (more than 100) while effectively managing global state. Performance issues arise when using the Material UI <TextField /> component, with noti ...

javascriptreactjsmaterial-uirecoiljs

Contemplate and send an Axios request directly from the browser's URL bar

Seeking JavaScript Logic Assistance I could use some guidance on implementing JavaScript logic, specifically with Vue Router. I don't necessarily need the answer handed to me, just a nudge in the right direction (and apologies if my question is not q ...

javascriptapivue.jsaxiosvue-router

Deactivate button using Javascript

Can anyone assist me with this issue I am having? I currently have a button set up as follows: <input type="button" id="myButton" name="myButton" value="ClickMe!!" onClick="callMe()"/> I need to disable the button using jQuery, standard javascript ...

javascriptjqueryhtmlcssdojo

Guide to retrieving the data type of a List Column using SharePoint's REST API

I am currently attempting to determine the type of columns in my SharePoint list so that I can accurately populate a form with the appropriate field types. During my research, I stumbled upon this informative article in the documentation which discusses ac ...

javascriptjqueryajaxsharepoint

Accessing Rails controller information via a JavaScript AJAX request

In the process of developing a rails application, I have implemented code within the controller to interact with an API. Initially, I call the inventories endpoint, followed by separate calls to two other id endpoints (store_id and product_id) in order to ...

javascriptjqueryruby-on-railsajaxapi

Vue warning triggered in Jest test due to error being rethrown

I have a Vue application consisting of a page component and a nested child component that performs an asynchronous post request. When the request fails, an error is thrown and propagated to the top component (Page.vue). The top component handles all errors ...

vue.jsjestjsvue-test-utils

Troubleshooting compatibility issues with Node.js modules on Windows: a comprehensive guide

When I use nodejs to write a command line tool, I encounter an error on Windows. However, there seems to be no problem when running it on Linux and Mac OSX systems. You can find the package at https://www.npmjs.com/package/idoc To globally install, use t ...

javascriptnode.jsnpmnode-modules

Determining the total number of combinations possible from a collection of five arrays containing items

I have five massive collections filled with various strings, and each of them contains a different number of elements. Below are examples of the lists: List 1 "Jeffrey the Great", "Bean-man", "Joe", "Charles", "Flamur", "Leka", ...

javascriptarrays

accessing various tiers of data through an application programming interface

Currently, I have successfully accessed 5 followers of a GitHub user via AJAX. I am now attempting to delve three levels deep into each of the initial 5 followers, retrieving 5 more followers at each level. Essentially, the goal is to return 5 followers, t ...

javascriptjqueryjsonapi

When converting a .ts file to a .js file using the webpack command, lengthy comments are automatically appended at the end of

As a backend developer, I recently delved into UI technologies and experimented with converting TypeScript files (.ts) to JavaScript files (.js) using the webpack command. While the conversion works well, the generated .js file includes lengthy comments at ...

javascriptangulartypescriptionic-frameworkwebpack

Nested tables in Datatables retrieving child table rows based on parent table

I have been struggling for the past three days to get my nested Datatables working properly. I have a parent table called MAINtable and a child table called adjlinesTable. The issue I am facing is that all lines from the adjlinesTable are being drawn to ...

javascriptjqueryajaxdatatables

How can I complete this .js file and .ejs file in NodeJS (Express) to query the object ID in my browser?

My goal is to query an objectID from MongoDB using NodeJS and then retrieve it on my local host through http://localhost:3000/objectSearch?objectid= I've searched everywhere, but I can't seem to figure it out. If someone could provide me wi ...

javascriptnode.jsmongodbexpress

Error encountered while implementing onMutate function in React Query for Optimistic Updates

export const usePostApi = () => useMutation(['key'], (data: FormData) => api.postFilesImages({ requestBody: data })); Query Definition const { mutateAsync } = usePostApi(); const {data} = await mutateAsync(formData, { onMutate: ...

javascriptreactjstypescriptreact-queryoptimistic