webpack

image.png

loader 是webpack的核心工作原理，通过这些资源加载器，完成webpack的打包工作
plugin相当于挂载在webpack生命周期中的钩子程序，通过这些钩子程序达到在使webpack实现更加强大的功能

webpack-dev-server 实现代理api

如图：

代理api实现跨域
pathRewrite替换代理中出现的字符
changeOrigin不能使用localhost+端口使用的域名，而是使用实际的代理域名的IP

webpack配置source-map

使用属性devtool
传输参数较多，常用的有：
eval-是否使用eval执行模块代码
cheap-Source Map 是否包含行信息
module-是否能够得到Loader处理之前的代码

模块热替HMR

webpack-dev-server中内置集成有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，与业务代码无关 ============

// 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 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程

构建流程主要运行在 nodejs 环境下，配置文件遵循 CommonJS 规范

工作过程：

• 代码及资源文件散落在项目各处，Webpack 根据配置，找到入口文件
• 以入口文件作为打包入口，根据出现的 import、require 等语句，解析推断出依赖的资源文件，再分别解析
• 每个资源模块对应的依赖，最终形成整个项目文件之间依赖关系的依赖树
• 遍历、递归依赖树，找到每个节点对应的资源文件
• 根据配置文件的 rules 属性，找到对应模块的加载器，使用加载器加载相应的模块
• 加载的结果会被并入 bundle.js（打包输入文件），从而实现整个项目的打包
  示例： 查看