image.png

loader 是webpack的核心工作原理猴誊，通過這些資源加載器，完成webpack的打包工作
plugin相當(dāng)于掛載在webpack生命周期中的鉤子程序侮措，通過這些鉤子程序達(dá)到在使webpack實現(xiàn)更加強大的功能

webpack-dev-server 實現(xiàn)代理api

如圖：

代理api實現(xiàn)跨域

webpack配置source-map

使用屬性devtool
傳輸參數(shù)較多，常用的有：
eval-是否使用eval執(zhí)行模塊代碼
cheap-Source Map 是否包含行信息
module-是否能夠得到Loader處理之前的代碼

模塊熱替HMR

webpack-dev-server中內(nèi)置集成有HMR：

const webpack = require("webpack")
//...
module.exports={
  //...
  devServer: {
    hotOnly: true  
  }
  //...
  plugins: {
      //...
      new hotModuleReplacementPlugin()
  }
}

HMR的APIs：
在入口文件中：

 import createEditor from './editor'
import background from './better.png'
import './global.css'

const editor = createEditor()
document.body.appendChild(editor)

const img = new Image()
img.src = background
document.body.appendChild(img)

// ============ 以下用于處理 HMR分扎，與業(yè)務(wù)代碼無關(guān) ============

// console.log(createEditor)

if (module.hot) {
  let lastEditor = editor

//處理js文件
  module.hot.accept('./editor', () => {
    // console.log('editor 模塊更新了澄成，需要這里手動處理熱替換邏輯')
    // console.log(createEditor)

    const value = lastEditor.innerHTML
    document.body.removeChild(lastEditor)
    const newEditor = createEditor()
    newEditor.innerHTML = value
    document.body.appendChild(newEditor)
    lastEditor = newEditor
  })
//處理圖片文件
  module.hot.accept('./better.png', () => {
    img.src = background
    console.log(background)
  })
}

1. Webpack 的構(gòu)建流程主要有哪些環(huán)節(jié)？如果可以請盡可能詳盡的描述 Webpack 打包的整個過程

構(gòu)建流程主要運行在 nodejs 環(huán)境下，配置文件遵循 CommonJS 規(guī)范

工作過程：

• 代碼及資源文件散落在項目各處墨状，Webpack 根據(jù)配置卫漫，找到入口文件
• 以入口文件作為打包入口，根據(jù)出現(xiàn)的 import肾砂、require 等語句列赎，解析推斷出依賴的資源文件，再分別解析
• 每個資源模塊對應(yīng)的依賴镐确，最終形成整個項目文件之間依賴關(guān)系的依賴樹
• 遍歷包吝、遞歸依賴樹，找到每個節(jié)點對應(yīng)的資源文件
• 根據(jù)配置文件的 rules 屬性源葫，找到對應(yīng)模塊的加載器诗越，使用加載器加載相應(yīng)的模塊
• 加載的結(jié)果會被并入 bundle.js（打包輸入文件），從而實現(xiàn)整個項目的打包
  示例： 查看