三分鐘使用webpack-dev-sever搭建一個伺服器

李文楊發表於2017-12-12
Webdev伺服器

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儲存,切換回瀏覽器無需重新整理,看一下頁面的字是不是變了;

 

搞定,收工!

 

相關文章