前提：1、對webpack有一定了解，本文不做介紹
2、安裝node.js
手把手操作：
1、創建一個名為webpack-server的文件夾（隨便取的）
2、cd到當前文件夾：cd webpack-server，有個快捷方法，打開文件夾，按住shift鍵，點鼠標右鍵，選擇在“在此處打開命令窗口(w)”
3、打開命令行后，輸入npm init 命令創建package.json文件
接下來一步一步填，一直enter不填直接跳過也行
yes后就會生成一個package.json文件。
{ "name": "webpack-server", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
4、在webpack-server文件夾下創建app文件夾，並在該文件夾下面創建index.html和main.js，同時創建一個webpack打包的配置文件webpack.config.js
此時文件目錄如下：
三個文件代碼是這樣的
index.html
<html> <body> <script type="text/javascript" src="bundle.js"></script> </body> </html>
main.js
document.write('<h1>Hello World!!!</h1>');
webpack.config.js
module.exports = { devtool: 'eval-source-map', entry: './main.js', output: { filename: 'bundle.js' } };
以上是一些打包的簡單代碼，在頁面中輸出Hello World!!!
5、安裝webpack，作為依賴包。
指令：npm install --save-dev webpack
（提示：安裝淘寶鏡像會更快下載，方法見鏈接https://npm.taobao.org/，安裝了之后，指令就是cnpm install --save-dev webpack）
安裝完成，webpack-server會生成一個node_modules的文件夾，同時，package.json依賴包增加webpack
6、安裝webpack-dev-server，指令：npm install --save-dev webpack-dev-server，（淘寶鏡像下是cnpm install --save-dev webpack-dev-server）
安裝完后又多了一個依賴包
7、安裝完后就可以關掉該命令行窗口了，然后進入app文件夾，在app文件夾下面打開命令行窗口，並執行webpack-dev-server命令
ok，看到這就表示成功了，你就可以打開http://localhost:8080/打開頁面了。（注：默認為8080端口，可以修改的）
8、簡單修改下代碼：
畫面自動變成：
——————————————————————————————分割線————————————————————————————————
webpack-dev-server有以下可選參數：
--content-base //設定webpack-dev-server的director根目錄。如果不進行設定的話，默認是在當前目錄下。
--quiet: //控制台中不輸出打包的信息，開發中一般設置為false，進行 打印，這樣查看錯誤比較方面
--no-info: // 不顯示任何信息
--colors: //對信息進行顏色輸出
--no-colors: //對信息不進行顏色輸出
--compress: //開啟gzip壓縮
--host <hostname/ip>: //設置ip
--port <number>: //設置端口號，默認是:8080
--inline: //webpack-dev-server會在你的webpack.config.js的入口配置文件中再添加一個入口,
--hot: //開發熱替換
--open: //啟動命令，自動打開瀏覽器
--history-api-fallback: //查看歷史url
上面的參數都是可選的，舉個改變端口的例子：
指令：webpack-dev-server --port 8088
顯示出來的是：
以上就是我所分享的內容，純屬原創，歡迎閱讀與轉載，請注明出處！