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

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

Overview

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 ("

Modular

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

require("./fnData");

• 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

1.

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.

Procedure

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

Bytes

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

Webpack

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.

Summary

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!