快捷導(dǎo)航

詳解node.js中的npm和webpack配置方法

更新時間：2018年01月21日 09:43:06 作者：馬大哈tt

Node.js用c++語言編寫而成的，是一個基于chrome V8引擎的javascript運(yùn)行環(huán)境。這篇文章主要介紹了詳解node.js中的npm和webpack配置,需要的朋友可以參考下

概述

Node.js用c++語言編寫而成的，是一個基于chrome V8引擎的javascript運(yùn)行環(huán)境，讓javaScript的運(yùn)行脫離瀏覽器服務(wù)端，可以使用javaScript語言書寫服務(wù)器端代碼

1.使用node來實(shí)現(xiàn)一個http服務(wù)器

下面創(chuàng)建了一個端口為8787的服務(wù)器.他與php，java等不同，像php本地還要基于阿帕奇服務(wù)器，node.js能用代碼快速搭建一個服務(wù)器。

// 引入http模塊
var http = require("http");
// 調(diào)用http的接口創(chuàng)建服務(wù)器；回調(diào)--->異步；
var server = http.createServer(function(req,res){
 // request:瀏覽器提交給服務(wù)器相關(guān)；response:服務(wù)器到瀏覽器；
 console.log(111);
 // 設(shè)置編碼格式
 res.setHeader("Content-type","text/html;charset=utf8");
 res.write("<h1>hello world 11233</h1>");
 res.write("你好世界");
 res.end();
})
server.listen(8787);

模塊化

1. 模塊化開發(fā)

1.CommonJS就是為JS的表現(xiàn)來制定規(guī)范，因?yàn)閖s沒有模塊的功能所以CommonJS應(yīng)運(yùn)而生，它希望js可以在任何地方運(yùn)行，不只是瀏覽器中。

2.創(chuàng)建自己的模塊

node.js中命名空間是獨(dú)立的

在一個模塊里引入另一個模塊的方法或者變量使用require

•引入fnData模塊

require("./fnData");

•導(dǎo)入與導(dǎo)出(導(dǎo)出變量或者函數(shù))

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

2. 內(nèi)置模塊

nodejs內(nèi)置模塊有：Buffer，C/C++Addons，Child Processes，Cluster，Console，Cr

ypto，Debugger，DNS，Domain，Errors，Events，F(xiàn)ile System，

Globals，HTTP，HTTPS，Modules，Net，OS，Path，Process，P unycode，Query Strings，Readline，REPL，Stream，String De coder，Timers，TLS/SSL，TTY，UDP/Datagram，URL， Utilities，V8，VM，ZLIB；內(nèi)置模塊不需要安裝，外置模塊需要安裝；

3. npm

1.一組模塊的集合，是node的包管理器

下面npm常用的終端命令

1.

安裝Node模塊

npm install moduleNames

將包安裝到全局環(huán)境中

npm install <name> -g

安裝的同時，如果有package.json文件時,命令將信息寫入package.json中項(xiàng)目路徑中

npm install <name> --save

2.查看node模塊的package.json文件夾npm view moduleNames

3.查看當(dāng)前目錄下已安裝的node包

npm list

4.查看幫助命令

npm help

5.查看包的依賴關(guān)系

npm view moudleName dependencies

6.查看包的源文件地址

npm view moduleName repository.url

7.查看包所依賴的Node的版本

npm view moduleName engines

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

npm help folders

9.用于更改包內(nèi)容后進(jìn)行重建

npm rebuild moduleName

10.檢查包是否已經(jīng)過時，此命令會列出所有已經(jīng)過時的包，可以及時進(jìn)行包的更新

npm outdated

11.更新node模塊

npm update moduleName

12.卸載node模塊

npm uninstall moudleName

13.一個npm包是包含了package.json的文件夾，package.json描述了這個文件夾的結(jié)構(gòu)。訪問npm的json文件夾的方法如下：

$ npm help json

此命令會以默認(rèn)的方式打開一個網(wǎng)頁，如果更改了默認(rèn)打開程序則可能不會以網(wǎng)頁的形式打開。

14.發(fā)布一個npm包的時候，需要檢驗(yàn)?zāi)硞€包名是否已存在

$ npm search packageName

15.npm init：會引導(dǎo)你創(chuàng)建一個package.json文件，包括名稱、版本、作者這些信息等

16.npm root：查看當(dāng)前包的安裝路徑

npm root -g：查看全局的包的安裝路徑

17.npm -v：查看npm安裝的版本

4. webpack

概念：是近的一加載器兼打包工具，它能把各種資源，例如J (含J X)、 coffee、樣式(含less/sass)、圖片等都作為模塊來使用和處理。

配置步驟

1.全局安裝webpack

npm install webpack -g

2.新建webpack.config.js編寫此配置文件

module.exports = {
// 當(dāng)前執(zhí)行文件的路徑
 // 輸入
 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",//本地服務(wù)器所加載的頁面所在的目錄
  historyApiFallback: true,//不跳轉(zhuǎn)
  inline: true//實(shí)時刷新
 },
}

3.使用下面終端命令初始化自動創(chuàng)建package.json文件，一直按enter就可以了

npm init

4.package.json文件已經(jīng)就緒，我們在本項(xiàng)目中安裝Webpack作為依賴包

// 安裝Webpack
npm install --save-dev webpack

接著在文件夾中新建app和build文件夾，app文件夾放我們要寫的js,css等模塊文件，build里放webpack打包生成的js文件以及一個index.html

此時目錄結(jié)構(gòu)如下：

5.在inex.html文件中引入自動生成的bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <div class="div1"></div>
 <!--webpack/gulp/grount-->
</body>
<script src="bundle.js"></script>
</html>

在module1.js中定義一些變量與方法，作為一個模塊使用exports導(dǎo)出

console.log("我是module1.js");
var a = "我是a變量";
var fn = function(){
 console.log("我是fn函數(shù)");
}
module.exports = {
 a,
 fn
}

在index.js中使用require引入module.js的方法與變量

var res = require("./module1");
require("./index.css");
console.log("我是index.js");
console.log(res.a);
res.fn();

6.終端運(yùn)行webpack

webpack

7.在package-loack.json中scripts配置

對npm進(jìn)行配置后可以在命令行中使用簡單的npm start命令來替代webpack的命令

像下面配置后，npm dev可以代替 npm webpack-dev-server --open命令

{
 "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"
 }
}

此時輸入npm start 就可以打包文件了