webpack學習(四)— webpack-dev-server

 webpack提供給咱們檢查壓縮代碼的功能以外,還提供了1個服務器的插件,這就是webpack-dev-server,利用這個差價咱們能夠啓動個web服務器並時時更新咱們的修改。javascript

下面以1個簡單的例子說明,項目結構:css

 

package.jsonhtml

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "測試webpack",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --inline --hot --config webpack.config.js"
  },
  "author": "zouqin",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.21.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.16.2"
  }
}

 webpack.config.jsjava

var path = require("path");
module.exports = {
  entry:[
    './js/app.js'
  ],
  output: {
    path: path.resolve('./', "dist"),
    publicPath: "build",
    filename: "bundle.js"
  }
};

  index.htmlnode

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
    </head>
    <body>
        <h1>我是h1標籤</h1>
        <script src="build/bundle.js"></script>
    </body>
</html>

  js/app.jswebpack

document.getElementsByTagName('h1')[0].style.background='#0f0';

  

  -------------git

  以上的目錄文件建好以後,用 npm install 安裝package.json中聲明的依賴。這時候項目根目錄下就會生成node_modules文件夾。github

  接下來,就啓動webpack-dev-server。命令參見package.json下的 "scripts"項,用: web

 npm run dev

  至關於運行了 npm

 webpack-dev-server --inline --hot --config webpack.config.js  

  還有另一種方式:在項目根目錄下運行:

node node_modules/.bin/webpack-dev-server  

  這其實說明了咱們的webpack命令是來自node_modules/.bin/webpack-dev-server。咱們看github webpack-dev-server官網

  

  本項目用的在inline模式,沒有嵌在frame中。默認的端口號是8080,因此訪問地址是:http://localhost:8080/index.html

  webpack-dev-server是一個小型的Node.js Express服務器【1】。既然這樣,不少配置是能夠設置的。啓動端口號能夠設置的,下面這個就在8000端口啓動:

webpack-dev-server --port 8000 --devtool eval --progress --colors --hot --inline

  

  

  注意:

  1)webpack.config.js中的output項,能夠這麼理解:path是打包的項目路徑,用webpack -p 執行。publicPath是webpack-dev-server的路徑。

  2)webpack-dev-server他將打包後的存在內存中,並無在工做區生成一個文件。打包文件用,用webpack -p 命令。

  3)--hot 是熱加載,也就是說,當咱們改動文件後保存,瀏覽器已經自動刷新了咱們的修改,不須要按F5,這在咱們開發時很方便

  4)修改index.html文件,並不會熱加載。熱加載相關的是入口文件,本例中的是js/app.js文件,修改這個文件,會熱加載。

  5) 本例沒有用css,用了css,並在入口文件js/app.js中require,修改css。也會熱加載。同理,若是用了HTML的插件,在入口文件中引入,也會熱加載。

  6)網上的好多例子,在webpack.config.js這麼寫:

  

  entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],

  多了個'webpack/hot/only-dev-server',實踐下來發現去掉徹底能夠。

  參考

  【1】https://segmentfault.com/a/1190000006964335

相關文章
相關標籤/搜索