Repository: lgwebdream/FE-Interview
Branch: master
Commit: 6d433aa8654c
Files: 30
Total size: 399.6 KB
Directory structure:
gitextract_o0nht6g1/
├── .gitattributes
├── .gitignore
├── LICENSE.md
├── README.md
├── demos/
│ └── yd-webpack-demo/
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ ├── assets/
│ │ │ └── index.html
│ │ ├── back.js
│ │ ├── demo01/
│ │ │ └── data.mjs
│ │ ├── demo02/
│ │ │ └── data.js
│ │ ├── demo03/
│ │ │ ├── math.c
│ │ │ └── program.wasm
│ │ ├── demo04/
│ │ │ └── index.js
│ │ ├── demo05/
│ │ │ └── index.js
│ │ ├── demo06/
│ │ │ └── index.css
│ │ └── index.js
│ └── webpack.config.js
└── summarry/
├── algorithm.md
├── all.md
├── css.md
├── daily.md
├── html.md
├── http.md
├── javascript.md
├── node.md
├── other.md
├── program.md
├── react.md
├── vue.md
└── webpack.md
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
*.md linguist-language=JavaScript
================================================
FILE: .gitignore
================================================
.classpath
.project
.settings
##filter databfile、sln file##
*.mdb
*.ldb
*.sln
##class file##
*.com
*.class
*.dll
*.exe
*.o
*.so
# compression file
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip
*.via
*.tmp
*.err
# OS generated files #
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
Icon?
ehthumbs.db
Thumbs.db
================================================
FILE: LICENSE.md
================================================
本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
================================================
FILE: README.md
================================================
前端面试
## ☕ 前端面试每日一题
> 每天 get 一个知识点
### Day386:写一个通用的事件侦听器函数
**[答案&解析](https://github.com/lgwebdream/FE-Interview-Planet/issues/122)**
## 📚 前端面试题汇总
- **[全部面试题汇总](https://github.com/lgwebdream/FE-Interview/issues)**
## 📱 手机刷题(附带详细答案)
> 二维码加载失败请点击 [入口](http://img-static.yidengxuetang.com/wxapp/issue-img/wxqr-github.png)
## ⏱️ 最近更新
- [Day385:在一个 DOM 上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次？先执行冒泡还是捕获？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1220)
- [Day384:JavaScript 中如何实现一个类？怎么实例化这个类？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1219)
- [Day383:说下 React 的 useEffect、useCallback、useMemo](https://github.com/lgwebdream/FE-Interview-Planet/issues/1218)
- [Day382:说一下 setTimeout 和 setInterval 的区别，包含内存方面的分析？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1217)
- [Day381:说一下 JavaScript 严格模式下有哪些不同？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1216)
- [Day380:实现一个系统，统计前端页面性能、页面 JS 报错、用户操作行为、PV/UV、用户设备等消息，并进行必要的监控报警。方案如何设计，用什么技术点，什么样的系统架构，难点会在哪里？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1215)
- [Day379:如果让你来实现一个前端监控系统，应该考虑什么？如何去实现？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1214)
- [Day378:说一下什么是 Http 协议无状态?怎么解决 Http 协议无状态?](https://github.com/lgwebdream/FE-Interview-Planet/issues/1213)
- [Day377:说一下你了解的 WebSocket 鉴权授权方案？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1211)
- [Day376:说一下你对进程和线程的了解？Node 中进程间是如何进行通信的？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1210)
- [Day375:setTimeout/setInterval 实现倒计时如何解决时间偏差的问题?](https://github.com/lgwebdream/FE-Interview-Planet/issues/1209)
- [Day374:说一下开发中常用的几种 Content-Type ？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1208)
- [Day373：说下 Node 中 require 模块引入的查找方式？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1207)
- [Day372:说一下你对 Get 和 Post 请求在缓存方面理解](https://github.com/lgwebdream/FE-Interview-Planet/issues/1206)
- [Day371:使用 Symbol 函数都有哪些要注意的点？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1205)
- [Day370:为什么使用 setTimeout 实现 setInterval？怎么模拟？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1204)
- [Day369:说下你对 Reflect 的理解？为什么会有 Reflect 的出现？Proxy 也简单的说一下？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1203)
- [Day368:说一下你对 Get 请求传参长度限制的理解？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1202)
- [Day367:说下 URL 和 URI 的区别？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1201)
- [Day366:什么是 CSP?](https://github.com/lgwebdream/FE-Interview-Planet/issues/1200)
- [Day365:如何解决 Vue 打包 vendor 过大的问题？Webpack 打包 vue 速度慢怎么办？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1199)
- [Day364：为什么说 React 中 props 是只读的？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1197)
- [Day363:举例说明 React 的插槽有哪些运用场景？你有用过 React 的插槽(Portals)吗？怎么用？](https://github.com/lgwebdream/FE-Interview-Planet/issues/1196)
## 🏠 前端面试 Family
如果你在工作中遇到问题、在面试中遇到疑惑、在前端路上遇到了阻碍，都可以加入我们前端星球 Family，我们会竭尽全力为大家答疑解惑，让我们共同努力，一同成长。
## 版权许可
本作品采用[知识共享署名-非商业性使用 4.0 国际许可协议](http://creativecommons.org/licenses/by-nc/4.0/)进行许可，只要保持原作者署名和非商用，您可以自由地阅读、分享、修改。
================================================
FILE: demos/yd-webpack-demo/README.md
================================================
# Webpack5 新特性尝鲜实战 【第二季】🦀🦀
------
标题我们写上了**Webpack** 新特性实战尝鲜的第二季，那么肯定就有第一季了( [Webpack5.0 新特性尝鲜实战 🦀🦀【第一季】](https://mp.weixin.qq.com/s/0aJmmmrQCwylpViRb09rQA))。距离写上一篇文章已经超过了一年的时间，那时候还是**major**版，我们先来总结一下吧：
> * dist打包文件测评
> * 让人揪心的按需加载
> * moduleIds & chunkIds得已确定
> * 饱受诟病的编译速度
> * minSize&maxSize 更好的方式表达
> * 编译器的优化
> * Node.js polyfills 自动被移除
老袁写这篇文章的时候现在的版本是 v5.0.0-beta.22，开发进度71%。如果有更多变化和新特性，我也会给大家持续输出第三季。
### 这一年还发生了啥
> 除了以上老袁写的一些新特性以外，这一年最大的新增特性就是 **Module federation** 它的出现为 `微前端`解决了最核心的组件共享的问题，这个的Google上的优秀文章就太多了，大家自行查阅吧。当然这一年老袁也又老了一岁🤤我也学不动了🤒好了接下来天也不早了，人也不少了，我们干点正事吧。
------
## 走进Webpack5 Experiments
webpack 5中引入了experiments可选选项，以使用户能够激活和试用实验功能。虽是实验属性，可我只能说真香。
### 1. topLevelAwait 支持[顶级Await Stage 3提案](https://github.com/tc39/proposal-top-level-await)
```javascript
//demo/data.js
const data = '京程一灯';
export default data;
//demo/index.js
let output;
async function main() {
const dynamic = await import('./data');
output = dynamic + '🏮';
}
main();
export { output };
//执行如下代码
import { output } from './demo';
console.log(output);
// 很遗憾output是undefined
```
遗憾归遗憾，我们似乎丝毫没得办法去让他得到我们最后处理的值。当然你可以用哨兵变量不停的去询问和递归等等，但都不是一个最佳的办法，因为对于前端同学来讲async和await必须是一对。今天这种情况得到了改善。
```shell
yarn add webpack@next
#会让你选择版本 选择最新的beta版本
yarn add webpack-cli@next
```
接下来编写webpack.config.js
```javascript
module.exports = {
experiments: {
// 导入异步模块 import webpack会提示你打开这个属性
importAsync: true,
// 全靠它了topLevelAwait
topLevelAwait: true,
},
};
```
```javascript
//重写demo/index.js
const dynamic = await import('./data');
export const output = dynamic.default + '';
//你也可以这么写
const dynamic = import('./data');
export const output = (await dynamic).default + Math.random() + '🍊';
```
好的，接下来就是见证奇迹的时刻了。
我的内心突然有了丝丝的幸福感，你呢🙃可是你以为结束了，我们可以玩点更劲爆的。
```javascript
//demo02/index.js
const connectToDB = async () => {
const data = await new Promise((r) => {
r('京程一灯');
});
return data;
};
const result = await connectToDB();
let output = `${result}🍊`;
export { output };
//执行如下代码
import await { output } from './demo02';
console.log(output);
```
调整一下webpack.config.js
```javascript
module.exports = {
experiments: {
// 三兄弟聚齐了
importAsync: true,
topLevelAwait: true,
// 支持import await
importAwait: true,
},
};
```
我的内心毫无波澜甚至呆滞了很久😧
### 2. 再见了file-loader、url-loader、raw-loader
废话少说还是上硬核代码吧
```css
body {
background: url('./bg.png');
}
```
```javascript
import './demo03/index.css';
console.log('京程一灯');
```
再继续修改下webpack.config.js
```javascript
module.exports = {
output: {
assetModuleFilename: 'images/[name].[hash:5][ext]',
},
module: {
rules: [
{
test: /\.(png|jpg|svg)$/,
type: 'asset',
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
experiments: {
asset: true,
},
};
```
大型真香现场无疑了🔮
```shell
yarn dev
```
### 3. 丝丝顺滑的WebAssembly
```c
//一段非常简单的C代码
int add (int x, int y) {
return x + y;
}
//然后我们把它编译成program.wasm
```
来吧，展示🎙
```javascript
//webpack4只能这样去加载program.wasm
//如果同步去加载 会报错不能把wasm当成主chunk
import('./demo04/program.wasm').then((p) => {
console.log(p.add(4, 6));
});
//webpack5震撼来袭
//有人说WebAssembly这玩意也没人用啊？那啥 🛏 晚安
import { add } from './demo03/program';
console.log(add(4, 6));
```
继续修改webpack.config.js，应该不用老袁继续解释了。
```javascript
module.exports = {
experiments: {
asyncWebAssembly: true,
syncWebAssembly: true,
},
};
```
### 4. 我的mjs能管不？能
```javascript
//demo05/index.mjs
const data = '京程一灯';
export default data;
//运行一下代码
import data from './demo5';
console.log(data);
```
修改webpack.config.js
```
module.exports = {
experiments: {
mjs: true,
},
};
```
### 5. outputModule是啥？
| 属性 | 值 |
| -------------------- | :----- |
| outputModule | true |
| output.libraryTarget | module |
这个属性有什么用呢，我们编写类库的时候会经常使用到它，他可以帮助我们完成生成的代码的模块标准，那么设置outputModule为true以后和不设置的区别在哪呢？看图说话吧（如名字所示丢掉了闭包把自己变成了module）。
### 6. 最后来张全家福吧
---
作者 老袁
2020 年 07月 15日
================================================
FILE: demos/yd-webpack-demo/package.json
================================================
{
"name": "yd-webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"prod": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.6.0",
"style-loader": "^1.2.1",
"html-webpack-plugin": "^4.3.0",
"webpack": "^5.0.0-beta.22",
"webpack-cli": "^4.0.0-beta.8"
}
}
================================================
FILE: demos/yd-webpack-demo/src/assets/index.html
================================================
默认模板
京程一灯
