前面我們實現(xiàn)了webpack的操作簡化,這里我們徹底脫離操作,實現(xiàn)修改過程中的自動打包,基本實現(xiàn),package.json配置,webpack.config.js配置

配置前

配置后

https://www.webpackjs.com/concepts/plugins/

一.基本實現(xiàn)

• 安裝webpack-dev-server自動打包插件
  npm i webpack-dev-server -D
• 在pakege.json文件中的scripts腳本中配置
  "dev":"webpack-dev-server"
• 在項目目錄中執(zhí)行
  npm run dev
  會找到pakege.json包配置文件中腳本中的dev執(zhí)行后面的內(nèi)容
• 如何終止運(yùn)行
  ctrl+C y
  注意:1.如果在安裝之后無法運(yùn)行,在此項目中安裝webpack(npm i webpack -D) 2.修改路徑:../dist/main.js為/main.js
通過webpack-dev-server自動轉(zhuǎn)換得到的main.js并沒有真的放在dist文件夾下,由于讀寫磁盤的操作是非常耗時的,所以為了提升性能,把編譯好的文件放在了內(nèi)存中

二.pakege.json自動打包配置

默認(rèn)必須打開指定的路徑到達(dá)項目目錄,為了在完成自動打包插件運(yùn)行后,自動打開指定的文件并且設(shè)置指定端口,執(zhí)行熱更新,我們需要手動的對webpack-dev-server自動打包插件進(jìn)行配置

• 自動打開 --open
• 設(shè)置端口號 --port 8090
• 指定默認(rèn)界面 --contentBase src
• 指定熱更新 --hot

熱更新:如果沒有熱更新,修改之后會重新編譯整個index.js文件,加上熱更新只會編譯發(fā)生變化的部分,然后追加到已經(jīng)編譯好的main.js中(內(nèi)存),相當(dāng)于打補(bǔ)丁(在原有的基礎(chǔ)上追加)

image.png

image.png

三.webpack.config.js自動打包配置

由于webpack-dev-server不僅僅是通過npm安裝的一個插件,能夠通過npm的配置文件運(yùn)行,它還是基于webpack打包工具的插件,也可以通過webpack配置文件進(jìn)行配置

• 創(chuàng)建devServer屬性并設(shè)置
  devServer:{
  open:true,
  port:8090,
  contentBase:'src',
  hot:true
  }
• 這里熱更新操作需要安裝插件
  • 導(dǎo)入webpack模塊
    const webpack=require("webpack");
  • 在devServer屬性中配置

  • 創(chuàng)建熱更新插件
    plugins:[new webpack.HotModuleReplacementPlugin]

    
    
    image.png