Do developers frequently use npm install --save in conjunction with webpack?

Currently, I am expanding my knowledge of webpack and diving deeper into the world of JavaScript, including utilizing npm.

Numerous responses discuss the comparison between --save and --save-dev when executing npm install. From what I gather, their usage (along with updates to package.json) proves beneficial in recreating a runtime or development environment using 

npm install <the package being developed or ran>

  • --save is employed to retain packages required for running the application in node.js, specifically on a server
  • --save-dev is used to store packages essential for app development
  • a simple npm install <module> installment only installs the package without allowing it to be installed elsewhere through an appropriate entry in package.json

Therefore, within a webpack framework, is --save ever utilized? My belief is that it is not necessary, as a JS bundle is generated and subsequently included in the HTML file for execution in a browser. Thus, there is no need to "save modules required to run your app."

Similarly, --save-dev is valuable (once again, within a webpack context) as it enables developers to work externally (in this scenario, both application modules (like moment.js) and logistical ones (like gulp) should be installed with --save-dev, correct?)

Lastly, a basic npm install <module> is feasible (though less practical) if the focus is solely on internal development (modules are installed but this action is not recorded in package.json).

Is this assessment accurate? Particularly, is the assumption of the absence of --save valid within a webpack setting?

javascriptnpmwebpacknpm-installwebpack-2

Answer №1

When putting together your application's production build, it's important to include all the tools and dependencies used in the process under save. For example, if you rely on React for your application, make sure to list it as a dependency since it plays a crucial role in the final build. It doesn't matter if the file is bundled; what matters is that it's essential for the compiled version to run smoothly.

On the other hand, any tools or dependencies utilized during development should be categorized under devDependency. Once WebPack finishes bundling your files, for instance, it becomes unnecessary for the final compile and can be omitted from the production build.

--save-dev: This tag is specifically for listing items used during development, such as unit testing frameworks or bundlers.

--save: Use this tag for components that are directly incorporated into your application, like Axios, React, Vue, or Chart.JS.

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

Issue with jQuery's JSON data not being properly transmitted to CodeIgniter (`

Based on my observation, the script provided below seems to be functioning properly: <script type="text/javascript" language="javascript"> $(document).ready(function() { $('#add').bind('keypress', function(e) { if(e.k ...

phpjavascriptjquerymysqlcodeigniter

Is there a way to integrate a PHP variable into JavaScript's getTime() function?

I'm attempting to compare two dates: one is the current date, and the other is a date stored in my database (retrieved through an SQL query). I was advised to use new Date(), but I'm unsure how to include a php variable in the script. Here is the ...

javascriptphpdate

Certain scripts fail to load properly when using Internet Explorer

The code snippet provided only seems to be functional in Firefox, where it displays all alerts and successfully executes the displayUserLanding function. However, in Internet Explorer, the browser appears to only execute the following alert: alert("Helper ...

javascriptjqueryajax

Convert the jade file to an HTML file while keeping the original file name

I'm currently attempting to configure Jade in a way that allows me to save my Jade files as HTML files while retaining the same file name. For example, I would like the file views/index.jade to be saved as dist/index.html This should apply to all ad ...

javascriptgruntjsnpmpug

Switching images through onmouseover, onmouseout, and onclick interactions

I have two images named img1 and img2. Here is my code: function roll(id, img_name, event_name, img_id) { var state ; if(event_name == 'mouseover') { state = false;rollover();} else if(event_name == 'mouseout') { ...

javascriptonclickonmouseoutonmousemove

Unable to commit on GIT due to corrupt node_modules path

I've decided to include all components inside the node_modules folder in my git version control. I removed the node_modules folder from .gitignore, thinking it would sync without any issues. However, I encountered the following error: The file will h ...

node.jsgitnpmyeoman

Utilize various arrays within a single component

Incorporating react, I am faced with the challenge of passing data by props to a component that originates from two separate arrays. How can I effectively pass this data while ensuring only one component is created? If I attempt to map both arrays as is, ...

javascriptarraysreactjs

I am seeking a way to eliminate double quotation marks from a string without using the replace function

I need assistance in removing double quotes from the string "Hello". I have an array var ary = ['a', 'b' , 'c'] When I extract a value from the array, it returns the value in string format, such as ary[0] = "a", but I want i ...

javascriptarraysregexstringreturn-value

I am experiencing difficulty in loading JS files within a Django template

I am encountering an issue with my Django project. While my static files for images and CSS are loading correctly, the JavaScript files are not. I have created a folder named "static" within my app with the following structure: static/js/my_app/, where my ...

javascriptdjangodjango-templates

"What is the best way to send a stateful array from a child component to a parent component using React Hooks

Within my CreateArea component, I collect user input data and store it in a local state array called notes using setNote. My goal is to display multiple Note components below the CreateArea component, with each component corresponding to an item in the no ...

javascriptreactjsreact-hooks

The npm package n is causing errors to be emitted

Upon completion of the installation using the command 'sudo npm install -g n', I attempted to list all node versions, but encountered some errors. However, despite this issue, n seems to be working normally! See below: $ n list /usr/bin/n: line ...

npmn

Display content in a div after the page is fully loaded with either a placeholder or animated loading

Hello everyone, this is my first post on here. I am relatively new to PHP, so any help or advice would be greatly appreciated. ...

javascriptjqueryajax

Adjusting the THREE.js function to accommodate a new starting rotation angle

I am currently in the process of converting the code from into an AFRAME component. Everything works fine when the initial rotation is '0 0 0', but I am now attempting to set a different initial rotation. Thanks to @Piotr, who created a fiddle ...

javascriptthree.jsrotationaframe

What is the correct way to modify the source code of an npm dependency?

Imagine having a lodash dependency. If you want to customize a method within it and ensure that the modified code is always included when running the npm i command, would forking the dependency repository, making the changes, and then somehow replacing t ...

node.jsnpm

verified firebase/firestore requests

I've been struggling with the process of sending authenticated firebase/firestore calls. I set up firestore in my web app using Next.js as shown below: import { initializeApp } from "firebase/app"; import { getFirestore } from 'firebase ...

javascriptfirebasegoogle-cloud-firestorenext.js

Creating Unique Numbers for Every <a> Element

Can someone help me figure out how to create a form that generates a unique set of random numbers from the range (0,9) displayed in a group of button tags? I've written some javascript code but it's not quite working as intended. (function($) ...

javascriptjqueryhtmltwitter-bootstrap

What are some ways to avoid the use of underline and slash symbols in material-ui/pickers?

Is there a way to remove the underline and slash characters that separate day, month, and year in the material ui pickers for version mui version 4? <KeyboardDatePicker margin="normal" id="date-picker-dialog" label="Dat ...

javascripthtmlreactjsdatepickermaterial-ui

VS code showing live server as installed but failing to function properly

After installing the live server extension, I noticed that my browser is not updating when I save my HTML or other files. What could be causing this issue? ...

javascripthtmlcssvisual-studio-code

What is the best way to implement client side validation for a related input field using JavaScript in a Rails application?

Struggling to find a solution for adding a validation check for a dropdown list that is dependent on another input selection in a different form. It seems like database validation may be necessary, but I'm unsure of the best approach. Any suggestions ...

javascriptjqueryruby-on-railsvalidation

Limit image dimensions

How can I limit the height and width of an image within the <img> tag to a maximum size of 400x400 px? If the image is smaller than this, it should display at its original size, but if larger, it should be compressed to fit within these dimensions. ...

javascripthtmlimageimage-size