㈠ webpack-dev-server搭建本地伺服器
webpack提供了一個可選的本地開發伺服器，這個本地伺服器基於node.js搭建，內部使用express框架，可以實現我們想要讓瀏覽器自動刷新顯示我們修改後的結果。
不過它是一個單獨的模塊，在webpack中使用之前先安裝它
devserver也是作為webpack中的一個選項，選項本身可以設置如下屬性：
contentBase：為哪一個文件夾提供本地服務，默認是根文件夾，這里寫./dist
port：埠號
inline：頁面實時刷新
historyApiFallback：在SPA頁面中，依賴HTML5的history模式
webpack.config.js文件配置修改如下：
在package.json中配置腳本
運行npm run dev遇到的問題： Error: Cannot find mole 'webpack-cli/bin/config-yargs'
原因是： webpack-cli的新版本對webpack-dev-server版本的不兼容
解決方案： 降低webpack-cli的版本為 "^3.3.12"
㈡ webpack怎麼開啟本地伺服器
這個任務並不是webpack可以勝任的，雖然webpack
cover了一部分gulp/grunt的職能，但是不要忘了webpack的名字，它主要功能還是在於package，所以還是使用gulp/grunt進行上傳吧，至於打包的task可以使用gulp-webpack這類插件來調用webpack。
關於上傳server這個插件可以滿足你
㈢ 如何搭建Web伺服器
windows Server 2012 搭建web伺服器方法如下：打開伺服器管理器，找到添加角色與功能，單擊打開。點擊下一步，至如圖所示的界面，檢查一下伺服器信息，看看是否有誤，確認無誤後，點擊下一步選擇Web伺服器，在前面打對勾選擇完後會彈出提示框，如下圖所示，選擇添加功能進到如圖所示的頁面後，可以選擇要添加的WEB伺服器的具體功能，可根據情況自行選擇，這里我們選擇默認設置，不做更改注意：在選擇功能的時候，一定要檢查一下最後面的管理工具中的IIS管理控制台是否選上。選擇完功能後，單擊下一步，進入安裝界面，點擊安裝安裝成功後，點擊關閉
㈣ 創建react項目並配置webpack
本文章僅供自己參考使用
在項目的根目錄下打開命令行，輸入：
安裝react 的東西,以及antd
安裝webpack 的三個基本項
安裝webpack
安裝webpack 伺服器 webpack-dev-server,讓啟動更方便
自動創建html文件 html-webpack-plugin
清除無用文件 clean-webpack-plugin,將每次打包多餘的文件刪除
樣式編譯loader插件
安裝babel
(1) 在項目根目錄下執行
(2) 如果裝有yarn，也可以用yarn執行
執行結果：
㈤ win7如何搭建Web伺服器
區域網Web伺服器的主要功能是實現資源共享，同時藉助於區域網伺服器訪問頁面可有效的實現信息的同步下面我就如何在Windows7系統下搭建Web伺服器與大家交流一下。
win7 搭建Web伺服器 方法
1、打開控制面板，選擇 “程序”，雙擊“打開或關閉Windows服務”
2、在彈出的窗口中選擇“Internet信息服務”下面的所有選項，點擊確定
3、開始更新服務
4、更新完成後，打開瀏覽器，輸入“http://localhost/”回車，如果此時出現IIS7歡迎界面，說明Web伺服器已經搭建成功。
5、當web伺服器搭建成功後，把開發的網站安裝到Web伺服器的目錄中。一般情況下，當Web伺服器安裝完成後，會創建路徑“%系統根目錄%inetpub/wwwroot”，將已開發的網站復制到該路徑下。即可實現本地訪問該網站。
6、設置防火牆，讓區域網的 其它 計算機也能訪問本地網站資源。具體方法：打開控制面板，選擇“系統和安全”，點擊“允許程序通過Windows防火牆”，在彈出的對話框中勾選“萬維網服務HTTP”右側的兩個復選框，點擊“確定”退出。
在區域網中其它計算機上，打開瀏覽器，輸入 “http://Web伺服器的IP地址/”按回車鍵，就可以訪問伺服器上的資源”。
經過以上步驟設置後，區域網中的其它用戶就可以通過瀏覽器訪問你所共享的web資源了!
㈥ webpack基本使用
step1: 創建一個項目錄
注意：項目名一般 不要帶中文
step2: 創建 package.json
或者：
step4: 處理第三方文件
html文件中需要引入多個js文件或者第三方模塊(例如：jquery.js)，只引入項目js入口文件( main.js ),其他js文件均在入口文件中導入。導致可能JS文件中使用了瀏覽器不識別的高級語法:
總結：webpack可以做兩件事情況：
step5: 配置入口文件和出口文件
每次修改js文件，手動輸入命令： webpack 入口文件路徑 -o 出口文件路徑 重新打包， 每次都要輸入入口文件和出口文件，麻煩。可以在項目目錄下建立配置文件 webpack.config.js ,指定入口文件和出口文件:
重新打包：
step6: 實現自動打包編譯
每次修改js文件，都要手動重新打包，還是麻煩？使用 webpack-dev-server 這個工具，來實現自動打包編譯的功能。
webpack-dev-server 這個工具，如果想要正常運行，要求在本地項目中必須安裝 webpack
在 package.json 文件中配置命令：
在終端中執行命令：
註：在終端執行 npm run dev ，就等於執行 webpack-dev-server 命令。這將在node中開啟一個伺服器，並且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自動監聽文件改變，並且自動打包。
改變文件引用路徑：
執行上述命令後終端會有類似信息輸出：
【 Project is running at http://localhost:8080/ 】——webpack-dev-server工具將項目託管到localhost:8080/埠上
【webpack output is served from /】——打包好的文件通過localhost:8080/bundle.js訪問
【Content not from webpack is served from C:UsersyfbDesktop前端學習案例4.27wabpackDemo_1src】——不是通過webpack打包的文件，則是以src為根目錄訪問。
該項目根目錄下並不存在bundel.js文件，我們可以認為webpack-dev-server把打包好的文件，以一種虛擬的形式託管到了咱們項目的根目錄中，雖然我們看不到它，但是可以認為和 dist、src、node_moles平級，有一個看不見的文件，叫做 bundle.js。其實是為了頻繁打包，提高效率，直接把打包的文件放在內存中。
因為項目託管到新伺服器，現在應該訪問的是 該伺服器 下的項目，文件引用路徑也要改變:
step7: 自動打開瀏覽器進行訪問、配置埠號、指定託管的根目錄、熱重載（只是修改補丁，不重新生成整個bundle.js文件）
在 package.json 中配置命令，並重啟伺服器：
step8: 使用 html-webpack-plugin 插件
使用 --contentBase 指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標簽的src屬性。
安裝 html-webpack-plugin 插件：
在 webpack.config.js 配置文件中配置插件：
html-webpack-plugin 插件的兩個作用：
step9: 處理樣式文件
html文件中需要引入css、less、sass樣式文件。默認情況下，webpack處理不了這些樣式文件。
處理css文件：
處理less樣式文件
㈦ web伺服器怎麼搭建
1、首先在控制面板中打開「管理工具」，打開「Internet信息服務（IIS）管理器」；
2、點擊我們的伺服器，展開，然後右鍵點擊「應用程序池」，選擇「添加應用程序池」打開；
3、在彈出的對話框中填寫好應用程序池的名稱、.net版本、託管管道模式選擇「集成」，選好了之後點擊確定；
4、添加好了應用程序池之後，我們右擊這個應用程序池，選擇「高級設置」；
5、在彈出的對話框中，常規一欄中，在「啟動32位應用程序」處選擇「True」，然後點擊確定，這樣應用程序池就ok了；
6、然後我們右擊「網站」，選擇「添加網站」；
7、在彈出的對話框中，我們填入網站的名稱，應用程序池處就選擇剛才我們新建的那個應用程序池，然後選擇物理路徑，再把ip地址和的埠填上，主機名處我們填上域名，如果沒有就可以不填；
8、填寫完成之後，我們就點擊「確定
㈧ 如何搭建的web伺服器
首先，兩台PC在同一個區域網內,比如pc1的IP地址為192.168.1.1 ，PC2的IP為192.168.1.2。
其次，看你安裝什麼操作系統及採用什麼編程語言（常見的有PHP或ASP），假定你用windows+PHP,那麼PC1的組合可以是WAMP（windows+Apache+Mysql+PHP），只需要下載一個wamp中文版的程序安裝就可以了。假如你裝在D盤根目錄下D:\wamp，那麼默認只要把web網頁文件放到d:\wamp\root\下面就可以了（最好修改成index.html，因為PHP的默認執行文件是這個命名)，剩下的在pc1上啟動wamp服務（有個按鈕點一下啟動），然後pc1打開瀏覽器執行 Localhost（前提是你這台機器沒有裝過其它web伺服器），這時候就能看到你剛剛放入的web文件內容了（記得默認文件名稱是index.html或index.htm），如果要訪問非默認文件，比如你有個test.html,那麼在瀏覽器中輸入localhost/test.html就可以看到了，如果看不到說明伺服器安裝不正確或服務沒有啟動。利用pc2訪問只需要在瀏覽器中輸入http://192.168.1.1（pc1的IP地址）就可以訪問了，非常簡單
最後，要說明的，不論ASP和PHP都支持靜態網頁文件「.htm"及".html"文件，ASP是微軟的東西，需要IIS支持，一般的windowsXP不帶這個東東，只有安裝windowsServer2000及以上版本的伺服器版windows才默認帶IIS，XP下可以到網上下載一個IIS6使用，安裝非常簡單，啟動運行也簡單，新手也能很快上手，同WAMP一樣，安裝完成後把網頁文件復制到IIS默認網站的目錄下就行（默認目錄在IIS操作界面裡面找，可以自己修改）。
如果你要寫ASP.NET程序，那麼WEB伺服器的操作系統上必需要安裝IIS+.NET庫的支持才能運行ASPX程序（.net），不安裝.net庫的話只能運行.asp文件，關於.net的安裝也很簡單，不過個人建議使用wamp運行PHP，開銷小，運行穩定更安全
㈨ Webpack 配置
通過 http://[devServer.host]:[devServer.port]/webpack-dev-server 查看 devServer 提供的所有資源列表。
通過 http://[devServer.host]:[devServer.port]/[output.publicPath]/資源名稱 來訪問對應的資源。
如果提供了 devMiddleware.publicPath ，則通過 http://[devServer.host]:[devServer.port]/[devMiddleware.publicPath]/資源名稱 來訪問對應的資源，但是通過插件生成的 html 和 css 文件當中所有資源引用的路徑仍然使用的是 http://[devServer.host]:[devServer.port]/[output.publicPath]/資源名稱 。因此需要保證 output.publicPath 與 devMiddleware.publicPath 一致。
static 設置的是靜態資源目錄的位置，不是打包生成的文件的存放位置，devServer 打包生成的文件存放在內存中，不存放到硬碟目錄。
static.publicPath 設置的是訪問靜態資源的路徑，不是訪問打包生成的資源的路徑，打包生成的資源路徑通過 output.publicPath 訪問，靜態資源路徑訪問的是直接存放在靜態目錄中的靜態資源。
配置文件
initial chunk 的文件名
佔位符：
non-initial chunk 的文件名，佔位符參考 output.filename
設置為 true ，每次打包之前清理 output.path 目錄中的所有內容，可以替代 CleanWebpackPlugin 插件。
定義資源存放的位置，例如根據以上的配置文件打包之後生成如下文件：
將 1 2 3 生成的資源都存放到 output.path 目錄， dist/app.bundle.js dist/css/app.min.css dist/images/1.jpg
部署的時候，將該目錄下的內容復制到伺服器對應的目錄即可。
定義資源訪問的路徑
資源訪問路徑 = output.publicPath + 資源名稱
output.publicPath 可以是絕對路徑、相對於服務的路徑、相對於頁面的路徑。 不管是哪種路徑，都要以 / 結尾
HtmlWebpackPlugin 生成的 index.html 文件：
MiniCssExtractPlugin 生成的 css 文件：
HtmlWebpackPlugin 生成的 index.html 文件：
MiniCssExtractPlugin 生成的 css 文件：
HtmlWebpackPlugin 生成的 index.html 文件：
MiniCssExtractPlugin 生成的 css 文件：
不管通過哪種路徑設置 output.publicPath ，都只是影響 HtmlWebpackPlugin 和 MiniCssExtractPlugin 生成的文件中引用其他資源的路徑。具體能不能根據資源路徑訪問到相應的資源，還得正確的部署 output.path 目錄到伺服器。
在開發模式下，devServer 自動開啟一個開發伺服器，並且將所有打包生成的資源存儲到內存當中，然後通過 http://[devServer.host]:[devServer.port]/[output.publicPath]/資源名稱 來訪問對應的資源。 這時候 output.publicPath 應該設置為相對服務的路徑，例如 / 。
如果你的頁面希望在其他不同路徑中找到資源文件，則可以通過 devServer 配置中的 devMiddleware.publicPath 選項進行修改。
在生產模式下，推薦將 output.publicPath 設置為絕對路徑，然後將 output.path 目錄部署與絕對路徑對應的伺服器中。
配置文件
mole.rules 是匹配規則數組，數組中的每一項為一條匹配規則，以下稱為 rule。每條 rule 包括匹配條件和匹配結果。
對於依賴圖中的每個模塊路徑，都按照 mole.rules 中的 rule 依次進行匹配。如果模塊路徑滿足某個 rule 的匹配條件，則對該模塊應用該 rule 的 匹配結果中指定的 loader 進行預處理。? 如果模塊路徑滿足多個 rule 的匹配條件 ?
匹配條件包括 test include exclude 選項，每個選項為一個匹配條件，選項的值可以是：
如果某個 rule 同時有多個匹配條件選項，則模塊路徑必須同時滿足所有的匹配條件，才會對模塊應用匹配結果。test 和 include 具有相同的作用，都是必須匹配選項。exclude 是必不匹配選項（優先於 test 和 include）。
最佳實踐：
以上配置文件的第二條 rule，如果某個模塊不在 ./src/node_moles/ 和 ./src/libs/ 目錄下，並且在 ./src/ 目錄下，並且模塊名以 .js 結尾，則滿足該條 rule 的匹配條件。
package.json
webpack.common.js
webpack.prod.js
webpack.dev.js
㈩ 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服務