1、webpack 伺服器端必須用node 處理嗎
node.js實現web伺服器還是比較簡單的，我了解node.js是從《node入門》開始的，如果你不了解node.js也可以看看！
我根據那書一步一步的練習完了，也的確大概了解了node.js，不過裡面寫的路由的地方總感覺不方便，十一放假最後一天，試著寫了個簡單的web伺服器，現在分享記錄於此！
http模塊已提供了基本功能，所以我主要解決兩個問題，1是靜態資源的處理，2是動態資源的路由。
靜態資源在node.js里的意思是不變的，如圖片、前端js、css、html頁面等。
動態資源我們一般指aspx頁面，ashx頁面，asp頁面，jsp頁面，php頁面等，而node.js里其實沒動態資源這一說，它對請求的處理都是由回調方法完成的，在我實現的httserver里，借鑒了ashx的寫法，把處理請求的js文件看作動態資源。
首先實現一個處理靜態資源的函數，其實就是對本地文件的讀取操作，這個方法已滿足了上面說的靜態資源的處理。
//處理靜態資源
function staticResHandler(localPath, ext, response) {
fs.readFile(localPath, "binary", function (error, file) {
if (error) {
response.writeHead(500, { "Content-Type": "text/plain" });
response.end("Server Error:" + error);
} else {
response.writeHead(200, { "Content-Type": getContentTypeByExt(ext) });
response.end(file, "binary");
}
});
}
而動態資源肯定不能一個方法搞定，就像你的網站有register.aspx、login.aspx等等，都需要你自己來寫，在我的httpserver里，每個處理請求的js模塊都導出processRequest(request,response)即可，比如實現一個register.js(只輸出字元串register)
exports.processRequest = function (request, response) {
response.writeHead(200, { 'Content-Type': 'text/plain' });
resp.end("register");
}
現在當請求到來時，我們要做的就是決定怎麼處理，即路由。
因為靜態資源url指定靜態資源大家都很習慣了，所以這里不變，比如
訪問http://localhost/img/logo.png 就是訪問 web根目錄\img\logo.png；
訪問http://localhost/js/what.js 就是訪問 web根目錄\js\what.js；
而動態資源也是一般的js文件，即伺服器端js，就比如我實現的這個httpserver.js和上面說的register.js都是不應該讓用戶訪問的，所以路由的時候要判斷，就是一些if、else，簡單而強大是我的最愛，這里只看最後的的判斷，
fs.exists(localPath, function (exists) {
if (exists) {
if (staticRes) {
staticResHandler(localPath, ext, response); //靜態資源
2、webpack 也可以作為本地伺服器嗎
webpack配置文件
之前是依賴全局環境下的打包過程，下面將 webpack 安裝到項目的依賴中，這樣就可以使用項目本地版本的 webpack
首先創建package.json文件：
npm init
1
1
自動生成後如下：
{
"name": "webpack-package.json",
"version": "1.0.0",
"description": "",
"main": "bundle.js",
"dependencies": {},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "yangll",
"license": "ISC"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
安裝項目環境
npm install webpack --save-dev //安裝
npm uninstall webpack --save-dev //卸載
1
2
1
2
設置Webpack 的配置文件webpack.config.js
var webpack = require('webpack');
var path = require('path');
mole.exports = {
entry: path.resolve(__dirname, './entry.js'),
output: {
path: path.resolve(__dirname, './'),
filename: 'bundle.js',
},
};
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
命令後執行webpack完成打包
webpack
1
1
打包日誌如下
Hash: 71820986fc674176394e
Version: webpack 1.13.1
Time: 82ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./entry.js 27 bytes {0} [built]
1
2
3
4
5
6
1
2
3
4
5
6
設置 package.json scripts
把下面的內容添加到 package.json
"scripts": {
"build": "webpack"
}
1
2
3
1
2
3
然後輸入 npm run build 就可以編譯了
啟動webpack內置伺服器環境
使用 webpack-dev-server 開發服務是一個更好的選擇。它將在 localhost:8080 啟動一個 express 靜態資源 web 伺服器，並且會以監聽模式自動運行 webpack，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以瀏覽項目中的頁面和編譯後的資源輸出，並且通過一個 socket.io 服務實時監聽它們的變化並自動刷新頁面。
安裝
$ npm install webpack-dev-server --save-dev
1
1
啟動
webpack-dev-server
1
1
日誌
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from D:\project
Hash: 71820986fc674176394e
Version: webpack 1.13.1
Time: 141ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
chunk {0} bundle.js (main) 27 bytes [rendered]
[0] ./entry.js 27 bytes {0} [built]
webpack: bundle is now VALID.
3、webpack和webpack-dev-server的區別
第一：webpack只是構建
webpack-dev-server除了構建，還提供web服務
第二：webpack.config.json的路徑參數
顯然，entry都一樣，因為都要知道需要構建的文件在哪裡
那麼區別就在於 output了
path和webpack一起，指明構建 之後 輸出文件的位置，這是真實的物理地址
publickPath和webpack-dev-server一起，當執行webpack-dev-server時，第一步首先跟webpack一樣，先構建輸出，然後提供web訪問，該輸出文件是在內存中
默認情況下，不設置publicPath則輸出文件默認在運行webpack-dev-server的目錄，也就是根目錄，，那麼html中引用直接是src="輸出的文件"，，如果設置了publicPath那麼html中引用也要相對改變
總的來說，webpack只是構建，而webpack-dev-server相當於webpack+apache（或者其它web伺服器）
區別在於
使用webpack+apache（或者其它伺服器），每次構建之後
1 根據path引用構建後的輸出文件；
2 每次修改都要重新運行webpack
使用webpack-dev-server，運行之後
1 先構建，輸出文件在內存中，引用構建後的輸出文件根據publicPath（默認是根目錄）；
2 每次修改，自動刷新
4、vue-cli + webpack 打包後的dist文件怎麼在伺服器中運行
使用nginx，借鑒網頁鏈接
5、webpack-dev-server和http伺服器如nginx有什麼區別?
webpack-dev-server使用內存來存儲webpack開發環境下的打包文件，並且可以使用模塊熱更新，他比傳統的http服務對開發更加簡單高效。(BY 三人行慕課)
6、webpack怎麼在打包完之後自動上傳文件到伺服器
webpack config裡面配置
自動打包需要設置mole裡面的loaders
比如react使用babel打包。內
熱部署就比較容簡單了。
可以使用plugins裡面的HotMoleReplacementPlugin()
也可以使用webpack dev server hot:true
7、求助webpack-dev-server的問題 伺服器鏈接報錯
server啟動後會自動退出
怎麼解決
server服務自動關閉很大一部分是由於系統本身存在一定的缺陷專和漏洞導致的，也可能是屬因為木馬病毒攻擊漏洞問題所致，病毒木馬攻擊提供文件共享服務computerbrowser進程，會導致server服務自動關閉。
8、webpack打包後的代碼，如何部署到伺服器上
本文章前端代碼是基於vue+webpack開發的
Nginx是一款輕量級的Web 伺服器/反向代理伺服器
首先，webpack配置如下
在開發過程中，我們是通過npm run dev在開發環境中運行代碼
如果要部署到生產環境中，可以運行npm run build進行上線打包
打包完成後，會發現項目中多了dist這個文件夾
執行結果和webpack的配置文件一致。
代碼被webpack打包完成後下一步就是部署到伺服器上，此文僅適合於前端代碼是部署在windows操作系統的nginx服務中。
這里假設：
Windows操作系統：windows server 2008 64位
Nginx服務：nginx-1.12.2 64位
1.下載nginx-1.12.2 64位解壓，假設nginx-1.12.2放在D:nginx-1.12.2目錄中，nginx目錄結構。如圖下
2、前端代碼放在D:nginx-1.12.2html目錄中，dist目錄就是剛剛前端打包完的代碼。如圖下
3、在D:nginx-1.12.2conf目錄中，有個nginx.conf配置文件，進行編輯這個文件
4、假設前端的埠號為8082，如果埠號被佔用，請修改為其它埠號。後台服務訪問地址http://192.168.121.**:8080,
5、打開cmd控制台，進入目錄D:nginx-1.12.2中，用start nginx命令啟動服務，然後用tasklist /fi "imagename eq nginx.exe"，查看nginx服務是否啟動。
4、如果改變配置文件時，需要用nginx -s reload 命令重啟nginx工作進程。
5、關閉服務
nginx -s stop
nginx -s quit 安全關閉
taskkill /F /IM nginx.exe > nul 關閉所有nginx服務
9、webpack怎麼開啟本地伺服器
首先，內網要有固定IP，另外要有路由器，在路由器中把你內部IP192.168.1.2的80埠打開就行了,你就可以通過123.45.67.89來訪問內網的WEB了
10、webpack打包的文件 怎麼發布到伺服器
這個任務並不是webpack可以勝任的，雖然webpack cover了一部分gulp/grunt的職能，但是不要忘了webpack的名版字，它主要功能還權是在於package，所以還是使用gulp/grunt進行上傳吧，至於打包的task可以使用gulp-webpack這類插件來調用webpack。
關於上傳server這個插件可以滿足你