webpack4 熱更新

安裝好webpack之後

在運作npm run build指令時，到底做了寫什麼？

1. 首先這個指令會去運作package.json檔案裡面的scripts腳本
2. scripts腳本首先通過babel把drag編譯成.temp臨時文檔案
3. 第三步是scripts會去執行webpack打包指令，該指令會去查找webpack.config.js配置檔案中的entry和output，然後輸出一個build/bunble.js檔案4
4. 然後就在本地可以打開index.html檔案了

• 到了這一步，隻完成了一小步，是以如果我修改一個檔案，我還需要手動去運作上面的那個指令，然後在重新整理浏覽器，才能看到更改後的效果，這樣開發效率就會大大降低。這時我們需要“熱更新”來幫助我們快速開發。

配置熱更新

安裝webpack-dev-server

cnpm install webpack-dev-server --g
cnpm install webpack-dev-serve --save-dev
           

配置webpack.config.js檔案

//引入webpack
const webpack = require('webpack');
//
 output: {
    publicPath: '/dist',
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'dist/'   //必須加上
devServer: {
    host: 'localhost',
    port: '8080',
    open: true, //自動拉起浏覽器
    hot: true, //熱加載
    //hotOnly:true
  },
  plugins: [
    //熱更新插件
    new webpack.HotModuleReplacementPlugin()
  ],
           

####### 配置 package.json 檔案

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    //加上
    "start": "webpack-dev-server"
           

項目打包運作：

npm run start

這個時候可能會有一片黃色的警告，詳情點選：打包後warning