webpack-dev-server的使用

時間 2019-11-08

標籤 webpack dev server 使用简体版

原文原文鏈接

　　1.安裝　html

npm install webpack-dev-server --save-dev

　　ps:爲保證webpack-dev-server能正常運行，請確認在本地項目中下載了webpack的包，能夠經過package.json來查看有無下載webpack

　　2.運行web

　　1.使用npx命令運行npm

npx webpack-dev-server

　　2.使用npm運行json

　　　　1.首先配置package.jsonwebpack-dev-server

//在script內新增dev鍵
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev":"webpack-dev-server --open --contentBase dist --hot"
  },
//參數說明
/*
   --open 執行命令時自動打開頁面
   --contentBase dir 打開時顯示的文件
   --hot    每次更新資源文件，不用更新全部資源，只更新部分，至關於加了一個補丁。 
*/

　　　　2.運行命令ui

npm run dev

　　3.修改引用包文件的頁面文件（*.html）spa

<!doctype html>
<html>
  <head>
    <title>起步</title>
  </head>
  <body>
    <!-- 這裏的路徑要修改爲根目錄下，由於webpack-dev-server會生成一個虛擬的的包文件，位於根目錄下 -->
    <script src="/bundle.js"></script>
  </body>
</html>

相關標籤/搜索

每日一句

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