架webpack-dev-server在本機端跑跑

姆喵要在本機端看程式變怎麼樣，所以需要這個功能。
很簡單，首先先安裝webpack-dev-server再看怎麼辦。

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

喔對了還要安裝這個

npm i html-webpack-plugin --save-dev

…裝好之後在src資料夾新建檔案，index.js和index.html
index.js

document.getElementById("demo").innerHTML = 5 + 6;

index.html

<!DOCTYPE html>
<html>
    <body>

        <h1>My First Web Page</h1>
        <p>My First Paragraph</p>

        <p id="demo"></p>

    </body>
</html>

…接下來在package.json加上這個

"scripts": {
    "start": "webpack serve --hot --open http://localhost:8080/"
  },

之後在命令列打上 npm start 就大功告成嘍！
※那個–hot是讓它有修改的時候會自動重整
參考這個網頁

Post Views: 225