Describes how to configure npm and webpack in node. js, node. jsnpm

Source: Internet
Author: User

Describes how to configure npm and webpack in node. js, node. jsnpm


Node. js is written in c ++. It is a javascript running environment based on the chrome V8 engine. It disconnects javaScript running from the browser server. It can be used to write server code.

1. Use node to implement an http server

The following is a server with port 8787 created. It is different from php and java. For example, php must be based on Apache server locally. node. js can quickly build a server with code.

// Introduce the http module var http = require ("http"); // call the http interface to create a server; callback ---> asynchronous; var server = http. createServer (function (req, res) {// request: Submitted by the browser to the server; response: Server to the browser; console. log (111); // sets the encoding format res. setHeader ("Content-type", "text/html; charset = utf8"); res. write ("


1. modular Development

1. CommonJS is designed to regulate JS performance. Because js has no module function, CommonJS came into being. It hopes that js can run anywhere, not just in a browser.

2. Create your own module

The namespace in node. js is independent.

Use require to introduce methods or variables of another module in one module

• Introduce the fnData Module


• Import and Export (export variables or functions)

module.exports = {myFn:test.myFn,a:test.a}

2. built-in modules

Nodejs built-in modules include Buffer, C/C ++ Addons, Child Processes, Cluster, Console, and Cr.

Ypto, Debugger, DNS, Domain, Errors, Events, File System,

Globals, HTTP, HTTPS, Modules, Net, OS, Path, Process, P unycode, Query Strings, Readline, REPL, Stream, String De coder, Timers, TLS/SSL, TTY, UDP/datax, URL, Utilities, V8, VM, ZLIB; built-in modules do not need to be installed, external modules need to be installed;

3. npm

1. A set of modules. It is the node Package Manager.

The following npm commonly used terminal commands


Install the Node Module

npm install moduleNames

Install the package in the global environment

npm install <name> -g

If a package. json file exists during installation, the command writes the information to the project path in package. json.

npm install <name> --save

2. view the package. json folder of the node module npm view moduleNames

3. view the installed node packages in the current directory

npm list

4. View help commands

npm help

5. view the package dependency

npm view moudleName dependencies

6. view the package source file address

npm view moduleName repository.url

7. view the Node version on which the package depends

npm view moduleName engines

8. View All Folders used by npm

npm help folders

9. Used to change the package content and recreate it

npm rebuild moduleName

10. Check whether the package is out of date. This command will list all outdated packages and update the packages in time.

npm outdated

11. Update the node Module

npm update moduleName

12. Uninstall the node Module

npm uninstall moudleName

13. an npm package contains a package. json folder. package. json describes the structure of this folder. The method for accessing the npm json folder is as follows:

$ npm help json

This command opens a web page by default. If the default program is changed, it may not be opened in the form of a Web page.

14. When releasing an npm package, check whether a package name already exists.

$ npm search packageName

15. npm init: guides you to create a package. json file, including the name, version, and author information.

16. npm root: view the installation path of the current package

Npm root-g: Check the installation path of the global package

17. npm-v: view the npm installation version.

4. webpack

Concept: it is a near-one loader and packaging tool that can handle various resources, such as J (including j x), coffee, and style (including less/sass) and images are used and processed as modules.


1. Install webpack globally

npm install webpack -g

2. Create webpack. config. js and write this configuration file.

Module. exports = {// path of the current execution file // enter entry :__ dirname + "/app/index. js ", // output: {path :__ dirname +"/build ", filename:" bundle. js "}, module: {loaders: [{test :/\. css $/, loader: "style-loader! Css-loader "}]}, watch: true, devServer: {contentBase :". /build ", // The Directory of the page loaded by the local server historyApiFallback: true, // do not jump to inline: true // real-time refresh },}

3. Use the following terminal command to initialize and automatically create the package. json file. Press enter all the time.

npm init

4. The package. json file is ready. We will install Webpack as the dependency package in this project.

// Install Webpacknpm install -- save-dev webpack


The directory structure is as follows:

5.introduce automatically generated bundle. js in the inex.html File

<!DOCTYPE html>

Define some variables and methods in module1.js and use exports for export as a module

Console. log ("I am module1.js"); var a = "I Am a variable"; var fn = function () {console. log ("I Am a fn function");} module. exports = {a, fn}

Use require in index. js to introduce module. js methods and variables

Var res = require (". /module1 "); require (". /index.css "); console. log ("I am index. js "); console. log (res. a); res. fn ();

6. Run webpack on the terminal


7. scripts configuration in the package-loack.json

After npm is configured, you can use the simple npm start command in the command line to replace the webpack command.

After the following configuration, npm dev can replacenpm webpack-dev-server --openCommand

{ "dependencies": { "css-loader": "^0.28.8", "style-loader": "^0.19.1", "webpack": "^3.10.0" }, "devDependencies": { "webpack-dev-server": "^2.11.0" }, "scripts": { "start": "webpack", "dev": "webpack-dev-server --open" }}

Enter npm start to package the file.


The above is a small part of the node. the npm and webpack configuration methods in js are helpful to you. If you have any questions, please leave a message. The editor will reply to you in time!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.