计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?
-
HTTP 常用的请求方式,区别和用途?
-
HTTPS 是什么?具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛?
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛?
-
HTTP 如何实现长连接?在什么时候会超时?
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的,UDP 为什么不可靠?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法
-
热模替换功能
-
devtool
-
准备生产环境
-
清除打包文件目录
-
提取css成单独文件
-
添加css兼容
-
压缩css
-
压缩html
====================================================================
什么是webpack
Webpack是一个模块打包器(bundler)。
在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
它将根据模块的依赖关系进行静态分析,生成对应的静态资源
五个核心概念
Entry:入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
Output:output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。
Loader:loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只能解析 JavaScript)。
Plugins:插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等。
Mode:模式,有生产模式production和开发模式development
理解Loader
Webpack 本身只能加载JS/JSON模块,如果要加载其他类型的文件(模块),就需要使用对应的loader 进行转换/加载
Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
它本身是一个函数,接受源文件作为参数,返回转换的结果
loader 一般以 xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转换功能,比如 json-loader。
理解Plugins
插件可以完成一些loader不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
配置文件(默认)
webpack.config.js : 是一个node模块,返回一个 json 格式的配置信息对象
=============================================================
初始化项目:
生成package.json文件
{
“name”: “webpack_test”,
“version”: “1.0.0”
}
安装webpack
npm install webpack webpack-cli -g //全局安装,作为指令使用
npm install webpack webpack-cli -D //本地安装,作为本地依赖使用
===============================================================
创建js文件
-
src/js/app.js
-
src/js/module1.js
-
src/js/module2.js
-
src/js/module3.js
创建json文件
src/json/data.json
创建主页面:
src/index.html
运行指令
-
开发配置指令:webpack src/js/app.js -o dist/js/app.js --mode=development
-
功能: webpack能够编译打包js和json文件,并且能将es6的模块化语法转换成浏览器能识别的语法
-
生产配置指令:
webpack src/js/app.js -o dist/js/app.js --mode=production
-
功能: 在开发配置功能上加上一个压缩代码
结论:
-
webpack能够编译打包js和json文件
-
能将es6的模块化语法转换成浏览器能识别的语法
-
能压缩代码
缺点:
-
不能编译打包css、img等文件
-
不能将js的es6基本语法转化为es5以下语法
改善: 使用webpack配置文件解决,自定义功能
======================================================================
目的:
在项目根目录定义配置文件,通过自定义配置文件,还原以上功能
文件名称:
webpack.config.js
文件内容:
const { resolve } = require(‘path’); //node内置核心模块,用来设置路径。
module.exports = {
entry: ‘./src/js/app.js’, // 入口文件配置(简写)
/*完整写法:
entry:{
main:‘./src/js/app.js’
}
*/
output: { // 输出配置
filename: ‘./js/built.js’, // 输出文件名
path: resolve(__dirname, ‘build’) //输出文件路径配置
},
mode: ‘development’ //开发环境(二选一)
mode: ‘production’ //生产环境(二选一)
};
运行指令: webpack
=================================================================
概述:
less文件webpack不能解析,需要借助loader编译解析
创建less文件
-
src/less/test1.less
-
src/less/test2.less
-
入口app.js文件
-
引入less资源
-
安装loader
npm install css-loader style-loader less-loader less --save-dev
配置loader
{
test: /.less$/, // 检查文件是否以.less结尾(检查是否是less文件)
use: [ // 数组中loader执行是从下到上,从右到左顺序执行
‘style-loader’, // 创建style标签,添加上js中的css代码
‘css-loader’, // 将css以commonjs方式整合到js文件中
‘less-loader’ // 将less文件解析成css文件
]
},
运行指令: webpack
===============================================================
概述:
对js基本语法错误/隐患,进行提前检查
安装loader
-
npm install eslint-loader eslint --save-dev
-
备注1:在:eslint.org网站 -> userGuide -> Configuring ESLint 查看如何配置
-
备注2:在:eslint.org网站 -> userGuide -> Rules 查看所有规则
配置loader
module: {
rules: [
{
test: /.js$/, //只检测js文件
exclude: /node_modules/, //排除node_modules文件夹
enforce: “pre”, //提前加载使用
use: { //使用eslint-loader解析
loader: “eslint-loader”
}
}
]
}
加粗样式
“eslintConfig”: {
“parserOptions”: {
“ecmaVersion”: 6, // 支持es6
“sourceType”: “module” // 使用es6模块化
},
“env”: { // 设置环境
“browser”: true, // 支持浏览器环境: 能够使用window上的全局变量
“node”: true // 支持服务器环境: 能够使用node上global的全局变量
},
“globals”: { // 声明使用的全局变量, 这样即使没有定义也不会报错了
“$”: “readonly” // $ 只读变量
},
“rules”: { // eslint检查的规则 0 忽略 1 警告 2 错误
“no-console”: 0, // 不检查console
“eqeqeq”: 2, // 用而不用=就报错
“no-alert”: 2 // 不能使用alert
},
“extends”: “eslint:recommended” // 使用eslint推荐的默认规则 https://cn.eslint.org/docs/rules/
},
运行指令: webpack
===============================================================
概述:
将浏览器不能识别的新语法转换成原来识别的旧语法,做浏览器兼容性处理
安装loader
npm install babel-loader @babel/core @babel/preset-env --save-dev
配置loader
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: “babel-loader”,
options: {
presets: [‘@babel/preset-env’]
}
}
}
]
}
运行指令: webpack
================================================================
第一种方法:使用经典的polyfill
安装包
npm install @babel/polyfill
使用
app.js
import ‘@babel/polyfill’; // 包含ES6的高级语法的转换
优点
解决babel只能转换部分低级语法的问题(如:let/const/解构赋值…),引入polyfill可以转换高级语法(如:Promise…)
缺点
将所有高级语法都进行了转换,但实际上可能只使用一部分
解决
需要按需加载(使用了什么高级语法,就转换什么,而其他的不转换)
第二种方法:借助按需引入core-js按需引入
安装包
npm install core-js
配置loader
{
test: /.js$/,
exclude: /(node_modules)/,
use: {
loader: ‘babel-loader’,
options: {
presets: [
[
‘@babel/preset-env’,
{
useBuiltIns: ‘usage’, // 按需引入需要使用polyfill
corejs: { version: 3 }, // 解决warn
targets: { // 指定兼容性处理哪些浏览器
“chrome”: “58”,
“ie”: “9”,
}
}
]
],
cacheDirectory: true, // 开启babel缓存
}
}
},
=====================================================================
概述:图片文件webpack不能解析,需要借助loader编译解析
添加2张图片:
-
小图, 小于8kb: src/images/vue.png
-
大图, 大于8kb: src/images/react.jpg
-
在less文件中通过背景图的方式引入图片
安装loader
npm install file-loader url-loader --save-dev
补充
url-loader是对象file-loader的上层封装,使用时需配合file-loader使用。
配置loader
{
test: /.(png|jpg|gif)$/,
use: {
loader: ‘url-loader’,
options: {
limit: 8192, // 8kb --> 8kb以下的图片会base64处理
outputPath: ‘images’, // 决定文件本地输出路径
publicPath: ‘…/build/images’, // 决定图片的url路径
name: ‘[hash:8].[ext]’ // 修改文件名称 [hash:8] hash值取8位 [ext] 文件扩展名
}
}
},
运行指令: webpack
=================================================================
概述:
html文件webpack不能解析,需要借助插件编译解析
添加html文件
src/index.html
注意不要在html中引入任何css和js文件
安装插件Plugins
npm install html-webpack-plugin --save-dev
在webpack.config.js中引入插件(插件都需要手动引入,而loader会自动加载)
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
配置插件Plugins
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’, // 以当前文件为模板创建新的HtML(1. 结构和原来一样 2. 会自动引入打包的资源)
}),
]
运行指令: webpack
====================================================================
概述:
html中的图片url-loader没法处理,它只能处理js中引入的图片 / 样式中图片,不能处理html中img标签,需要引入其他html-loader处理。
添加图片
在src/index.html添加两个img标签
安装loader
npm install html-loader --save-dev
配置loader
{
test: /.(html)$/,
use: {
loader: ‘html-loader’
}
}
运行指令: webpack
===============================================================
概述:
其他资源webpack不能解析,需要借助loader编译解析
添加字体文件
-
src/media/iconfont.eot
-
src/media/iconfont.svg
-
src/media/iconfont.ttf
-
src/media/iconfont.woff
-
src/media/iconfont.woff2
修改样式
@font-face {
font-family: ‘iconfont’;
src: url(‘…/media/iconfont.eot’);
src: url(‘…/media/iconfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘…/media/iconfont.woff2’) format(‘woff2’),
url(‘…/media/iconfont.woff’) format(‘woff’),
url(‘…/media/iconfont.ttf’) format(‘truetype’),
url(‘…/media/iconfont.svg#iconfont’) format(‘svg’);
}
.iconfont {
font-family: “iconfont” !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
配置loader
{
test: /.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/, // 处理其他资源
loader: ‘file-loader’,
options: {
outputPath: ‘media’,
name: ‘[hash:8].[ext]’
}
}
运行指令: webpack
=================================================================
安装loader
npm install webpack-dev-server --save-dev
详细配置见官网:指南 -> 开发环境 -> 使用webpack-dev-server
修改webpack配置对象(注意不是loader中)
devServer: {
open: true, // 自动打开浏览器
compress: true, // 启动gzip压缩
port: 3000, // 端口号
}
修改url-loader部分配置
-
因为构建工具以build为根目录,不用再找build了
-
publicPath: '../build/images/'
-->publicPath: 'images/'
修改package.json中scripts指令
“start”: “webpack-dev-server”,
最后
正值招聘旺季,很多小伙伴都询问我有没有前端方面的面试题!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
配置loader
{
test: /.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/, // 处理其他资源
loader: ‘file-loader’,
options: {
outputPath: ‘media’,
name: ‘[hash:8].[ext]’
}
}
运行指令: webpack
=================================================================
安装loader
npm install webpack-dev-server --save-dev
详细配置见官网:指南 -> 开发环境 -> 使用webpack-dev-server
修改webpack配置对象(注意不是loader中)
devServer: {
open: true, // 自动打开浏览器
compress: true, // 启动gzip压缩
port: 3000, // 端口号
}
修改url-loader部分配置
-
因为构建工具以build为根目录,不用再找build了
-
publicPath: '../build/images/'
-->publicPath: 'images/'
修改package.json中scripts指令
“start”: “webpack-dev-server”,
最后
正值招聘旺季,很多小伙伴都询问我有没有前端方面的面试题!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-g3Z14g1F-1715387679128)]