webpack學習（四）— webpack-dev-server

時間 2019-11-12

標籤 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。