一、webpack-dev-server

js指令碼修改後每次要重新執行npm run dev重新打包，非常麻煩，
因此需要一個自動檢測程式碼有無修改，自動打包功能
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

webpack.config.js配置

const path=require('path')

module.exports={
    mode:'development',
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'ok.js'
    }
}
 

1 安裝 webpack-dev-server

執行如下的命令，即可在專案中安裝此外掛：

npm install [email protected] -D

2 配置 webpack-dev-server

① 修改 package.json -> scripts 中的 dev 命令如下：

"scripts": {
    "dev": "webpack serve"
  }

1.2 index.html中引用打包後文件改成：

<script src='/ok.js'></script>

② 再次執行 npm run dev 命令，重新進行專案的打包
③ 在瀏覽器中訪問

為何/ok.js不是/disk/ok.js引用打包檔案？

webpack-dev-server 生成到記憶體中的檔案，預設放到了專案的根目錄中，而且是虛擬的、不可見的。
⚫ 可以直接用/表示專案根目錄，後面跟上要訪問的檔名稱，即可訪問記憶體中的檔案
⚫ 例如 /bundle.js 就表示要訪問 webpack-dev-server 生成到記憶體中的 bundle.js 檔案

二、html-webpack-plugin

上一步要訪問index.html要先進入src下才行，為了自動訪問可以使用html-webpack-plugin外掛解決
它的原理是把index.html複製一份到根目錄（同樣是在記憶體中實際不可見）

1安裝外掛

npm install html-webpack-plugin -D

2 配置 html-webpack-plugin

//【1】
const HtmlPlugin=require('html-webpack-plugin')
//【2】
const htmlPlugin=new HtmlPlugin({
    template:'./src/index.html',
    filename:'./index.html'
})


module.exports={
    mode:'development',
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        path:path.join(__dirname,'./dist/'),
        filename:'main.js'
    },
    //【3】
    plugins:[htmlPlugin]    
}

重啟專案，再訪問就可直接看到頁面
http://localhost:8080/
此外如果./src/index.html不引入main.js該外掛也會複製到根目錄同時自動引入此js