nodejswebpack教程_如何使用webpack打包ES6的Nodejs後台程序

1. Webpack前端項目打包配置

1、安裝依賴包

初始化項目為nodejs項目

另一種是在html中通過img標簽的src引入，因為webpack對html支持不友好，所以需要藉助插件html-webpack-plugin

第三種是借用拷貝插件，直接強行拷貝所有圖片，因為本項目圖片是在xslt中引用，所以褲磨採用第三種和第一種結合的方式處理圖片，在plugin參數中拆純肆添加

如果css是與其餘的css一起打包，那麼其中對fonts資源的引用路徑也會自動發生變化，一定注意，是個大坑旅轎！！

2. webpack 創建一個VUE項目

一、創建並初始化VUE項目
1.安裝完VUE和nodejs後在指定文件夾根目錄生成項目文件夾
在命令行衡畢內進入當前文仿粗件夾
輸入

其他選項默認

生成的文件備攔鎮夾

3.安裝完畢運行
yarn start
未安裝yarn的可直接運行
npm run dev

3.刪除初始化多餘項目
3.1刪除components文件夾下的helloworld文件
3.2在app.vue中刪除以下內容(如果報錯請檢查是否存在空格未刪除)

4.讓項目先跑起來
npm run dev

*注在開發測試環境使用-D/--seve-dev；生產環境使用-S/--seve

3. 如何系統地學習Node.js

1.《nodejs入門》,才38頁，很好，書中項目做一下，學會基礎

2.《nodejs開發指南》。180多頁，很好，書中項目做一下，知道基礎，及基本的配合express，jquery，bootstrap，資料庫MongoDB

另附一些node實現書中例子的一些變化使用Express3.0實現<Node.js開發指南

3.開始看express創建初始項目的源代碼對比2中的書，發現express更新後新的特性：Migrating from 3.x to 4.x · strongloop/express Wiki · GitHub

看express官網api

英文：Express 4.x - API Reference

中文：Express - api參考

4.之後發現，一個系列課程，從零開始nodejs系列文章：從零開始nodejs系列文章

其中文章： Node.js開發框架Express4.x：Node.js開發框架Express4.x ，詳細介紹了express4項目的基本內容，很好

文章：用Nodejs連接MySQL：用Nodejs連接MySQL，介紹mysql與node基本，及資料庫連接池，宕機，連接超時等node問題解決辦法，node-mysql官網也有相應英文解決辦法

5.node+json：node.js裡面怎麼創建和解析JSON格式的文件?

更全的是這一個How to parse JSON using Node.js? 但要注意如果require json，只載入一次，更新之後，再使用，可能還是老版本

json不好查看的問題：讀寫 JSON 文件 · Issue #73 · zhanhongtao/blog · GitHub

6.node郵件驗證：Nodejs發郵件組件Nodemailer

選擇適合的Node.js授權認證策略

7.很全的node mole Moles · joyent/node Wiki · GitHub

8.文件操作，要麼官方文檔：File System Node.js v0.12.2 Manual & Documentation，

或者node基礎-文件系統node.js 文件操作，有一個要注意的是存儲文件時，比如writefile寫路徑要使用path.join(__dirname, 「相對於當前文件路徑」); 如path.join(__dirname, "../upload/recordList/" + generateID("record") + ".json");,後端要採用這種dirname的形式，前端可以直接寫相對於當前文件路徑的形式

4. 如何用nodejs搭建web伺服器

使用Node.js搭建Web伺服器是學習Node.js比較全面的入門教程，因為實現Web伺服器需要用到幾個比較重要的模塊：http模塊、文件系統、url解析模塊、路徑解析模塊、以及301重定向技術等，下面我們就一起來學習如何搭建一個簡單的Web伺服器。

作為一個Web伺服器應具備以下幾個功能：

1、能顯示以.html/.htm結尾的Web頁面

2、能直接打開以.js/.css/.json/.text結尾的文件內容

3、顯示圖片資源

4、自動下載以.apk/.docx/.zip結尾的文件

5、形如http://xxx.com/a/b/ , 則查找b目錄下是否有index.html,如果有就顯示，如果沒有就列出該目錄下的所有文件及文件夾，並可以進一步訪問。

6、形如http://xxx.com/a/b, 則作301重定向到http://xxx.com/a/b/ , 這樣可以解決內部資源引用錯位的問題。

引入需要用到的幾個模塊：

//http協議模塊varhttp = require('http');//url解析模塊varurl = require('url');//文件系統模塊varfs = require("fs");//路徑解析模塊varpath = require("path");

創建服務並在指定的埠監聽：

//創建一個服務varhttpServer = http.createServer(this.processRequest.bind(this));//在指定的埠監聽服務httpServer.listen(port,function(){console.log("[HttpServer][Start]","runing at http://"+ip+":"+port+"/");console.timeEnd("[HttpServer][Start]");});

在創建服務的時候需要傳遞一個匿名函數processRequest 對請求進行處理，processRequest接收2個參數，分別是request和response, request對象中包含了請求的所有內容，response是用來設置響應頭以及對客戶端做出響應操作。

processRequest:function(request,response){varhasExt =true;varrequestUrl = request.url;varpathName = url.parse(requestUrl).pathname;//對請求的路徑進行解碼，防止中文亂碼pathName = decodeURI(pathName);//如果路徑中沒有擴展名if(path.extname(pathName) ===''){//如果不是以/結尾的，加/並作301重定向if(pathName.charAt(pathName.length-1) !="/"){pathName +="/";varredirect ="http://"+request.headers.host + pathName;response.writeHead(301, {location:redirect});response.end();return;}//添加默認的訪問頁面,但這個頁面不一定存在,後面會處理pathName +="index.html";hasExt =false;//標記默認頁面是程序自動添加的}//獲取資源文件的相對路徑varfilePath = path.join("http/webroot",pathName);//獲取對應文件的文檔類型varcontentType =this.getContentType(filePath);//如果文件名存在fs.exists(filePath,function(exists){if(exists){response.writeHead(200, {"content-type":contentType});varstream = fs.createReadStream(filePath,{flags:"r",encoding:null});stream.on("error", function() {response.writeHead(500,{"content-type":"text/html"});response.end("<h1>500 Server Error</h1>");});//返迴文件內容stream.pipe(response);}else{//文件名不存在的情況if(hasExt){//如果這個文件不是程序自動添加的，直接返回404response.writeHead(404, {"content-type":"text/html"});response.end("<h1>404 Not Found</h1>");}else{//如果文件是程序自動添加的且不存在，則表示用戶希望訪問的是該目錄下的文件列表varhtml ="<head><meta charset='utf-8'></head>";try{//用戶訪問目錄varfiledir = filePath.substring(0,filePath.lastIndexOf('\'));//獲取用戶訪問路徑下的文件列表varfiles = fs.readdirSync(filedir);//將訪問路徑下的所以文件一一列舉出來，並添加超鏈接，以便用戶進一步訪問for(variinfiles){varfilename = files[i];html +="<div><a href='"+filename+"'>"+filename+"</a></div>";}}catch(e){html +="<h1>您訪問的目錄不存在</h1>"}response.writeHead(200, {"content-type":"text/html"});response.end(html);}}});}

請求處理函數中有幾個重點需要說一下：

對於路徑中有中文的，瀏覽器會自動進行編碼（英文不變，中文會變），因此在接收到地址後，需要對地址進行解碼，否則最後得到的路徑和真實路徑不相符,

當訪問路徑不是以具體的文件結尾，並且不是以/結尾，則需要通過重定向加上/,表示當前目錄，否則當前路徑下的靜態資源會找不到

如果訪問路徑是目錄，則列出該目錄下所有文件及文件夾，並可以點擊訪問，為了讓中文目錄能正常顯示，則還要在header中設置charset=utf-8

核心代碼就這么多，大概140行左右，完整的代碼已上傳到github:https://github.com/git-onepixel/Node,

如果要運行demo,打開cmd切換到根目錄，運行node start 即可。

5. 如何在 NodeJs 上搭建 React 開發環境

1. 安裝 nodejs ：根據你的 Windows 類型(x86或x64)下載相應的安裝包，安裝完成後，在任一目錄下打開 cmd 窗口並運行 node -v 命令，則會輸出 node 的版本信息。
--註：在 windows 操作系統中，如果把 nodejs 安裝在系統盤（如：C盤），初始化時會提示 nodejs 沒有操作文件的許可權（無法新建 package.json 文件）。
（建議在非系統盤中安裝 nodejs ，本例安裝路徑：D:\Program Files）
2. 初始化猜信 npm：安裝 nodejs 時會默認安裝 npm，在 cmd 窗口中運行 npm -v 命令會輸出 npm 的版本信息。
接著運行 npm init 命令，並設置相關參數即完成 npm 初始化。這時 nodejs 會在當前目錄下（這里是：D:\Program Files\nodejs 目錄）新建一個 package.json 文件。
3. 利用 npm 安裝 react 相關的包：
3.1 運行 npm install react react-dom --save-dev 命令，安裝 react 和 react-dom 包。
其中 --save-dev 表示在 package.json 文件的 devDependencies 節點下添加包的引用，--save 表示在 package.json 文件的 dependencies 節點下添加包的引用
3.1 運行 npm install webpack webpack-dev-server --save-dev 命令，安裝 webpack 和 webpack-dev-server 包。
webpack 用來打包並壓縮 js 文件，webpack-dev-server 用來實時同步修改過的 js，html，css 文件到瀏覽器。
穗老輪 3.5 運行 npm install jsx-loader --save-dev 命令，安裝 jsx-loader 包（用來把按 ES5 規范編寫的 .jsx 文件轉成 .js 文件）含返。
如果需要支持符合 ES6 規范的腳本文件（.js 或 .jsx），還需安裝下面 4 個包：babel-core babel-loader babel-preset-es2015 babel-preset-react。
如果需要用到路由，還需安裝：react-router。
http://blog.csdn.net/zmx729618/article/details/60957363

6. 基礎篇——webpack基礎用法（三）

上一章節主要介紹了 entry 、 output 、 loaders 、 plugins 、 mode 等核心概悶裂念以及簡單的使用方法的介紹，接下來主要介紹文件的解析、壓縮、熱更新原理等。

安裝url-loader
npm install url-loader -D

上圖是自己寫的demo，在search.js中引用圖片資源，此示例為未使用url-loader時文件大小 134kb ；

上一節中螞宴閉講解了 webpack文件監聽 可以實現文件的自動構建，但是每次必須手動刷新瀏覽器，那麼有沒有不用祥指每次手動刷新瀏覽器，自動構建文件呢？答案是肯定的， 熱更新 。

注意：WDS因為是放在內存中，而watch是有對系統進行文件的輸出，所以在構建速度上WDS也是明顯快於watch的
接下來我們實際操作一下：

在package.json中添加一個dev命令，配置好webpack-dev-server;
npm i webpack-dev-server -D

修改webpack.config.js中的 mode 為 development ，因為 proction 是生產環境下使用的，而 development 是開發環境下使用的，所以在使用WDS的情況下，要將mode修改為 development ；

配置 HotMoleReplacementPlugin 插件和 devServer ，因為HotMoleReplacementPlugin是webpack內置插件，所以不用額外安裝的。

註：通常適用express、koa等後端服務，需要引用nodejs

註：一般js用Chunhash，css用Contenthash

到這里 webpack基礎篇已經講完了，下一章節開始 webpack進階篇

7. 用npm怎麼安裝webpack

安裝nodejs,你清舉可以挫下面的地址下載完成以後就可以一直下一步安裝了。我是安裝在了核察d盤的根目錄改正茄下安裝完成以後可以使用cmd輸入命令查看是否安裝成功。再通過查看環境變數，我們可以看到下面的D:\nodejs\ 說明確實安裝成功了

8. 如何使用webpack打包ES6的Nodejs後台程序

因為webpack可以直接打包es6語法在瀏覽器中運行，不然的話es6語法無法在瀏覽器中運行

導航:首頁 > 文件教程 > nodejswebpack教程

nodejswebpack教程

與nodejswebpack教程相關的資料

友情鏈接