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!