node.js中npm和webpack配置方法的详细说明

总结

Node.js用c语言编写，是一个基于chrome V8引擎的javascript运行环境，使得javaScript运行在浏览器服务器之外，可以用javaScript语言编写服务器端代码。

1.使用节点实现http服务器

下面创建了一个端口为8787的服务器。与php和java不同，php是基于本地的Apache服务器，node.js可以用代码快速搭建服务器。

//引入http模块var http=require(' http ')；//调用http的接口创建服务器；回调-异步；Varserver=http。createserver(函数(req，res) {//request:与浏览器提交到服务器相关；服务器对浏览器的响应；console . log(111)；//设置编码格式res.setheader ('content-type '，' text/html；charset=utf8’)；RES . write(' h1 hello world 11233/h1 ')；Res.write(《你好，世界》)；RES . end()；})server . listen(8787)；模块化

1.模块化开发

1.Commonjs是为js性能制定规范。因为JS没有模块功能，所以CommonJS应运而生。它希望JS可以在任何地方运行，而不仅仅是在浏览器中。

2.创建您自己的模块

node.js中的命名空间是独立的

将另一个模块引入一个模块的方法或变量需要

介绍fnData模块

要求('。/fnData’)；

导入和导出(导出变量或函数)

module . exports={ my fn : test . my fn，a:test.a} 2。内置模块

Nodejs内置模块有：缓冲区、C/C插件、子进程、集群、控制台和Cr

加密、调试器、域名系统、域、错误、事件、文件系统，

全局，HTTP，HTTPS，模块，网络，操作系统，路径，进程，P unycode，查询字符串，Readline，REPL，流，字符串De coder，Timers，TLS/SSL，TTY，UDP/数据报，URL，实用程序，V8，VM，ZLIB内置模块不需要安装，外部模块需要安装；

3.新公共管理

1.一组模块是节点的包管理器

npm通常使用以下终端命令

1.

安装节点模块

npm安装模块名称

将软件包安装到全球环境中

npm安装名称-g

在安装的同时，如果有package.json文件，命令会将信息写入package.json中的项目路径。

npm安装名称-保存

2.检查节点模块的package.json文件夹，npm视图模块名称

3.检查当前目录中安装的节点包

国家预防机制清单

4.检查帮助命令

npm帮助

5.查看包的依赖关系

npm查看moudleName依赖关系

6.检查包的源文件地址

npm视图moduleName repository.url

7.检查包所依赖的节点版本

npm视图模块名称引擎

8.查看npm使用的所有文件夹

npm帮助文件夹

9.它用于在更改包内容后重建

npm重建模块名称

10.检查包装是否过期。该命令将列出所有过时的包，并及时更新它们

国家预防机制已经过时

11.更新节点模块

npm更新模块名称

12.卸载节点模块

npm卸载moudleName

13.npm包是一个包含package.json的文件夹，它描述了这个文件夹的结构。访问npm的json文件夹的方法如下：

$ npm帮助json

默认情况下，此命令打开网页，如果更改了默认打开程序，它可能不会作为网页打开。

14.发布npm包时，有必要检查包名是否已经存在。

$ npm搜索packageName

15.npm init:它将指导您创建一个package.json文件，包括名称、版本、作者等等

16.npm根目录：查看当前包的安装路径

Npm root -g:查看全局包的安装路径

17.npm -v:检查已安装的npm版本

4.工具

概念：是最近的一个加载器和打包工具，可以使用和处理各种资源，比如J(包括J X)、咖啡、风格(包括less/sass)、图片等作为模块。

配置步骤

1.全局安装webpack

npm安装webpack -g

2.创建一个新的webpack.config.js来编写这个配置文件

module.exports={//当前执行文件的路径//输入entry : _ _ dirname '/app/index . js '，//output 3360 { path : _ _ dirname '/build '，filename:' bundle.js'}。module : { loaders : [{ test :/\。css$/，loader:'style-loader！CSS-loader'}]}，watch: true，devserver3360 {contentbase3360 '。/build '，//本地服务器加载的页面所在的目录为historyApiFallback: true。//不要跳转到inline: true//实时刷新}，}3。使用下面的终端命令初始化并自动创建package.json文件，并一直按enter键

npm初始化

4.package.json文件准备好了。我们在这个项目中安装了网络包作为依赖包

//安装webpack NPM安装-保存-开发webpack，然后创建新的应用程序并在文件夹中构建文件夹。app文件夹包含我们想要编写的js、css和其他模块文件，而build包含由webpack打包和index.html生成的js文件

此时，目录结构如下：

5.将自动生成的bundle.js引入到inex.html文件中

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title/head dy div class=' div 1 '/div！-web pack/graw/grount/body script src=' http : bundle . js '/script/html在module1.js中定义一些变量和方法，并使用export将其导出为模块

Console.log('我是module 1 . js ')；Var a='我是变量'；Var fn=function(){ console.log('我是fn function ')；}module.exports={a，fn}使用require在index.js中引入module.js的方法和变量

var res=require('。/module 1’；要求('。/index . CSS ')；Console.log('我是index . js ')；console . log(RES . a)；RES . fn()；6.终端运行网络包

工具

7.package-loack.json中的脚本配置

配置npm后，您可以在命令行中使用简单的npm start命令，而不是webpack命令

通过以下配置，npm dev可以取代NPM web pack-dev-server-open命令

{ ' dependencies ' : { ' CSS-loader ' : '^0.28.8'，' style-loader': '^0.19.1'，' webpack': '^3.10.0' }，dev dependencies ' : { ' web pack-dev-server ' : ' 2 . 11 . 0 ' }，' scripts ' : { ' start ' : ' web pack '，' dev ' 3360 ' web pack-dev-server-open

摘要

以上是边肖介绍的node.js中的npm和webpack配置方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！