三分鐘使用webpack-dev-sever搭建一個服務器
webpack-dev-server是一個小型的Node.js Express服務器,我們可以通過它搭建一個本地服務器,並且實現文件熱更新;
1.切換到你的目錄下對項目進行初始化
npm init
一頓enter,yes之後我們會得到package.json文件(ps:json不能寫註釋,別復制過去直接用奧!否則會報錯)
{ "name": "webpack_demo", //項目名稱 "version": "1.0.0", //版本號 "description": "", //描述 "main": "index.js", //入口文件 "scripts": { "test": "echo \"Error: no test specified\" && exit 1",}, //自定義命令(就是 npm run xxx之類的) "keywords": [],//關鍵詞，便於用戶搜索到我們的項目 "author": "",//作者 "license": "ISC" //開源許可證 }
2.安裝webpack
npm install webpack --save-dev
敲黑板!!!
為什麽使用--save-dev而不是--save?
--save 會把依賴包名稱添加到 package.json 文件 dependencies 下;
--save-dev 則添加到 package.json 文件 devDependencies 鍵下;
示例:
{"dependencies": { "vue": "^2.2.1" }, "devDependencies": {"vue-loader": "^11.1.4", "vue-template-compiler": "^2.2.1", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.0" } }
不過這只是它們的表面區別。它們真正的區別是，npm自己的文檔說dependencies是運行時依賴，devDependencies是開發時的依賴。即devDependencies 下列出的模塊，是我們開發時用的，比如 我們安裝 js的壓縮包gulp-uglify 時，我們采用的是 “npm install –save-dev gulp-uglify ”命令安裝，因為我們在發布後用不到它，而只是在我們開發才用到它。dependencies 下的模塊，則是我們發布後還需要依賴的模塊，譬如像jQuery庫或者Angular框架類似的，我們在開發完後後肯定還要依賴它們，否則就運行不了。
另外需要補充的是：
正常使用npm install時，會下載dependencies和devDependencies中的模塊，當使用npm install –production或者註明NODE_ENV變量值為production時，只會下載dependencies中的模塊。
webpack安裝成功後你的json文件是這樣的
{ "name": "webpack_demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"webpack-dev-server --env development" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.10.0" } }
3.安裝webpack-dev-server
npm install webpack-dev-server --save-dev
安裝成功之後你的可以看到依賴文件多出來一個
"devDependencies": { "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7" }
安裝到這裏結束,接下來開始配置,
新建webpack.config.js用來配置webpack
新建build文件夾作為輸入位置
新建src文件夾存放入口文件,
在src先創建index.js
var el = document.getElementById(‘app‘); el.innerHTML = ‘我要改變你!‘;
創建assets文件夾作為指定資源文件引用的路徑(要實現刷新這個很重要)
項目結構如下:
4.配置webpack.config.js
const path = require(‘path‘); //node的路徑模塊 module.exports = { entry: { app: ["./src/index.js"] //入口文件 }, output: { path: path.resolve(__dirname, "build"),//輸出位置 publicPath: "/assets/",//指定資源文件引用的目錄 filename: "bundle.js"//輸入文件 } }
新建index.html引入asset/bundle.js,你在本地是看不到這個bundle.js的,它其實存在了內存中,想看編譯後的代碼可以去build下找
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id="app">薩達撒多</p> <script type="text/javascript" src="assets/bundle.js"></script>
</body>
</html>
ok 其實現在我們可以運行webpack-dev-sever,他已經可以正常工作了,但是每次都這麽敲命令很麻煩,所以為們在package.json裏給他添加一個自定義命令
{ "name": "webpack_demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"webpack-dev-server --env development" //就是這句了 --env development的意思是開發者環境下
}, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.10.0" }, "dependencies": { "webpack-dev-server": "^2.9.7" } }
命令添加完成,我們就可以通過npm run dev來運行項目了,用過vue-cli的同學,有沒有很熟悉的感覺,哈哈
默認端口號是8080,也可是自己手動去修改端口號,怎麽改就不說了超簡單的,查一查網上有詳細教程
這個時候就證明成功了,在網頁上打開http://localhost:8080就可以看到頁面了,
這個時候讓我們修改一下index.js看看會發生什麽
var el = document.getElementById(‘app‘); el.innerHTML = ‘我被改變了!‘;
ctrl+s保存,切換回瀏覽器無需刷新,看一下頁面的字是不是變了;
搞定,收工!
三分鐘使用webpack-dev-sever搭建一個服務器