2024年Webpack5随笔，高级web前端工程师面试题库

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

出口入口

---

entry

entry:‘./src/main.js’

output

const path = require(‘path’)

output:{

path:path.resolve(__dirname,“./build”),

filename:‘js/bundle.js’

}

打包单文件

---

vue-loader@next

@vue/compiler-sfc

const { VueLoaderPlugin } = require(‘vue-loader/dist/index’)

两个标识

---

设置options api ：

new DefinPlugin(

{

VUE_OPTIONS_API:true,

VUE_PROD_DEVTOOLS:false

}

)

webpack-dev-server

---

将bundle文件保存到了内存里

事实上使用了一个库memfs（memory-fs webpack自己写的）

HMR热模加载

target:‘web’,

dvServer:{

contentBase:‘./public’,

hot:true，

host:‘0.0.0.0’,//可以让别的电脑看到自己电脑

port:‘7777’,

open:true,

compress:true,//gzip格式压缩 – Content-Encoding:gzip

proxy:{

secure:false,

changeOrigin:true

}

}

if(module.hot){

module.hot.accept(‘./js/element.js’,()=>{

console.log(‘element模板热更新了’)

})

}

解决方案：

vue-loader

react-refresh (react-hot-loader已经被弃用了)

原理：

WDS创建两个服务：提供静态资源的服务express和socket服务

historyApiFallback

---

resolve

---

基于enhence-resolve来解析文件路径

resolve:{

modules:[‘node_modules’]，

extensions:[‘.js’,‘.json’],

alias:{

‘@’:path.resolve(__dirname,“./src”)

}

}

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-8Ycymb4B-1715361672738)]