最后
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我特地针对初学者整理一套前端学习资料
==============================================================
对于webpack，最重要的就是配置文件，也就是webpack.config.js这个文件，这个文件是最终webpack执行打包时的打包依据，如何打包，打包成什么样，按什么规则打包都是由这个文件控制的，假如没有配置文件，那么webpack就只能按最基础的打包，因为它不敢乱动文件；
对于正常的前端开发而言，使用webpack最主要的工作就是编写，修改webpack的配置文件，也就是编写，修改webpack.config.js这个文件（在vue中就是对于的vue.config.js这个文件）；
既然webpack.config.js这个文件是一个js文件，那么其内的语法当然使用的就是JavaScript语法，本质上这个文件就导出了一个对象，这个对象里有多个设定好的属性名，值就是设定的打包规则，先看一个最原始的配置文件
module.exports = {
//配置内容
};
没有看错，这就是最简单的打包配置，也就是什么配置都没有，这种规则下，它只会按最基本的规则打包文件，它不会对文件有什么多余的操作，只是合并，压缩，减少最终项目的体积；
那么正常的配置文件应该是什么样的?它应有包含4个核心属性，分别是：分别是entry，output，loader，plugins
module.exports = {
entry:{},
output:{},
//loader是一个对象，具体写的位置是在module对象下的rules数组内的
module:{
rules:[]
},
plugins:[]
}
**入口起点(entry point)**指示 webpack 应该使用哪个模块，来作为构建其内部_依赖图_的开始，比如在vue中app.js这个文件就是入口起点
//指定./path/to/my/entry路径下的file.js文件为打包入口文件
module.exports = {
entry: ‘./path/to/my/entry/file.js’
};
如果是多个文件需要作为入口文件打包，并不是Vue这种单页应用
module.exports = {
//直接对应入口文件的路径
entry:‘./app.js’
//将数组中的每一项合并打包成一个入口文件，注意是将多个合并成一个入口文件，本质还是单页面应用
enrty:[‘./app.js’,‘./app2.js’]
//最常用的
entry:{
//属性名随意写
//指定了一个文件为入口文件，单入口文件
app:‘./app.js’,
//当里面有多个属性的时候，会打包成多个入口文件，与数组不同，本质已经是多页面（多入口）文件了
app2:‘./app2.js’
}
}
output 属性告诉 webpack 在哪里输出它所创建的 bundles（打包后的文件），以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中
//webpack.config.js
module.exports = {
entry:{
app:‘./app.js’
},
output:{
//必填，自定义名字，指定输出文件名，例子为指定输出的文件名为bundle.js
filename:‘bundle.js’,
//或者随机输出一个名字
filename:‘[name].[hash].js’ ,
/*
-
[name]指定的是入口中的key值，也就是上面的app，
-
[hash]根据前面的name生成一串hash字符串，
-
如果觉得太长可以截取，比如[hash:4]，截取前4位
*/
//filename也可以指定打包文件的存储路径
filename:‘./js/[name].[hash:6].js’,
//文件会被存储到打包文件夹下的js文件夹下，打包文件夹默认是dist文件夹
//对输出的路径做修改，对应的修改属性是path，path接收一个绝对路径作为参数，不能是相对路径
path:__dirname+‘/src/mybundle’
//__dirname代表当前这个配置文件的绝对路径
//打包到当前这个文件下的src文件夹下的mybundle文件夹下
}
}
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
loader的本质是一个方法，它会对内容按照方法的设定好的规则进行处理，使用的时候大多数需要额外安装
module.exports = {
//loader存放在module对象中的rules数组里，rules数组里的每一项都代表了一个loader处理
module:{
rules:[
{
//定义的loader
//test指定loader要处理什么类型的文件，值是一个正则
test:/.js$/,
//use代表处理文件需要使用到什么样的loader
use:‘babel-loader’,
use:{
loader:‘babel-loader’,
options:{
}
},
//当对这个文件需要用到多个loader的时候可以使用数组，数组的每一项都是一个对象
use:[{}]
}
]
}
}
常用loader
-
css-loader，style-loader等css处理loader；
-
url-loader，image-loader等图片、字体、文件等资源处理loader；
-
less-loader，sass-loader，babel-loader等处理语法糖的loader;
-
还有一些其他的loader，比如vue-loader，ts-loader;
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
const HtmlWebpackPlugin = require(‘html-webpack-plugin’); // 通过 npm 安装
const webpack = require(‘webpack’); // 用于访问内置插件
const config = {
module: {
rules: [
{ test: /.txt$/, use: ‘raw-loader’ }
]
},
plugins: [
new HtmlWebpackPlugin({template: ‘./src/index.html’})
]
};
module.exports = config;
常用plugin
-
优化文件体积的插件：commonsChunkPlugin（提取公共模块），uflifyjsWebpackPlugin（减少js文件体积，删除无用代码等操作），PurifyCSS等；
-
额外功能插件：HtmlWebpackPlugin（在我们的打包结果之中再打包出一个html文件，并且把我们的打包文件自动引入html），HotModuleReplacementPlugin（热更新插件）
============================================================
编译，肯定是使用到了webpack的loader，而这些loader并不是webpack自带的，需要额外安装；
编译ES6语法
虽然几年前的浏览器版本已经兼容es6了，但实际上老版本的浏览器大有所在（看看win7,xp的市场占有率就知道了），因此要么项目中不写es6语法，要么你针对的客户群确保使用的都是最近几年的浏览器版本，否则一旦项目中使用了es6的语法最好还是转换一下；
安装loader
cnpm install babel-loader @babel/core -save-dev
这里安装了两个模块，babel-loader和@babel/core，babel-loader是编译es6的load，@babel/core是babel-loader的编译核心（没错，是分开的，因此需要装两个）；
之后，还需要安装一个模块，@babel/preset-ent，@babel/preset是存储不同的js标准的规则集合，这边安装的是ent这个规则，因此通过npm安装就可以了（注意：有时候npm安装会出现很多问题，比如网络中断等等，国内强烈建议使用cnpm）
cnpm install @babel/preset-env -save-dev
配置使用
安装好了就是使用了
//安装好babel-loader之后，需要在配置文件，也就webpack.config.js中配置一下
module.exports = {
entry:{
app:‘./app.js’
},
output:{
filename:‘bundle.js’,
},
//loader存放在module对象中的rules数组里，rules数组里的每一项都代表了一个loader处理
module:{
rules:[
{
//定义的loader
//test指定loader要处理什么类型的文件，值是一个正则
test:/.js$/,
//use代表处理文件需要使用到什么样的loader
use:{
//使用的loader是babel-loader
loader:‘babel-loader’,
//options代表对babel-loader的配置
options:{
//对loader进行presets配置,值是一个数组
//数组的每一项又是一个数组，这个的第一项代表presets的名称
//数组的第二项是一个对象，targets是针对哪些个目标进行配置，值是一个对象
//示例中的browsers代表针对市场上的浏览器进行配置，配置的对象是针对市场上浏览器份额大于1%的浏览器进行配置
presets:[
[‘@babel/preset-env’,{
//targets是preset的核心配置
targets:{
browsers:[‘>1%’], //以浏览器为目标，这个最常用
node:‘10’, //以node10版本为目标
chrome:‘59’ //以chrome的59版本为目标
}
}]
]
}
},
//当对这个文件需要用到多个loader的时候可以使用数组，数组的每一项都是一个对象
// use:[{}]
}
]
},
//它是一个数组
plugins:[
]
}
targets对象是@babel/preset-env这个的配置核心，它存在的目的是告诉preset编辑的最终目标是什么样的，比如编译后的目标要兼容市场上所有市场占有率大于1%的浏览器（这个值具体怎么得到是官方提供的，不必细究）
那么是不是这样安装使用就可以将所有的es6都编译成es5了，实际上还不是，因为这个只是将es6的语法编译成es5（比如：可以将es6中的箭头函数编译替换成es5的写法），但实际上es6的新增的不仅仅是这些语法，还新增了许许多多的方法，数组上的，对象上的，这些原本不存在于es5中的方法是不能被babel-loader转换的，因此如果要转换这些方法，那么就需要安装新的loader
编译ES6方法
编译es6的方法的loader叫做babel-polyfill，它适合在项目中使用，本质上它会生成一个全局对象，在这个对象上挂载了所有es6中新增的方法，并且将es6的写法替换成了es5，在执行打包的适合，会将es6新增的方法替换成es5的写法
安装loader
cnpm install babel-polyfill -save-dev
配置使用
和babel-loader不同的是，babel-polyfill不需要在webpack.config.js的loader中进行配置，它有两种用法：
一种只需要在js文件中引入就可以正常使用了，比如
//app.js这个打包的入口文件中直接引入
import ‘babel-pliyfill’
在打包的入口文件中直接通过import引入就可以正常使用了；
另外一种，是将入口文件的值的类型改成一个数组，第一项值填入babel-polyfill
module.exports = {
entry:{
//将值改成数组，第一项值就是babel-polyfill
app:[‘babel-polyfill’,‘./app.js’]
},
output:{
filename:‘bundle.js’,
},
module:{},
//它是一个数组
plugins:[]
}
这两种配置的效果是完全一致的
编译语法糖
针对各种语法糖而言，编译的方式都和下例的typescript相似的，基本就是三步：
-
安装对应的loader（比如vue-loader和jsx-loader）；
-
在配置文件中写入对应的loader处理，写法都是固定的；
-
根据loader规则写配置，具体哪里找配置规则，可以到loader的npm官网上或者github的官网上查找；
Typescript
ts是js的超集，也就是说ts中的的有些语法并不能在js中运行，浏览器仅仅是识别的是js的语法，对于ts是不认识的，因此如果编写了ts的代码，最终都是需要编译成js的；
安装loader
cnpm install typescript ts-loader --save-dev
配置loader
module:{
rules:[
{
//ts文件的后缀一共有两种，一种是.ts文件，一种是.tsx文件，因此都要考虑到
test:/.tsx?$/,
use:{
loader:‘ts-loader’
}
}
]
},
编写配置文件
仅仅是在webpack.config.js中配置了ts的loader其实还是不能正常编译ts文件，还需要编写一个叫做tsconfig.jsons的配置文件：
同级目录下新建一个文件，命名为tsconfig.json（名字固定，不能改），既然是json文件，那必须使用json的语法写内容
{
“compilerOptions”: {
“module”: “commonjs”,//遵循的模块规范
“target”: “es5” //最终编译成es5的语法
},
“exclude”: [“./node_modules”] //写入不做处理的文件，也就是在进行编译的适合将这个文件夹排除
}
到这里，关于ts的配置才算是完成，等到打包的时候才可以正确的将ts的语法全部转成js的写法；
webpack是以js文件作为入口文件打包的，想要打包css同样也是需要安装loader，css的loader一共两个：css-loader，style-loader，这个loader的使用顺序很重要，要先进过css-loader处理，再由style-loader处理；
为什么能将css打包，简单的说，流程就是在js中通过improt引入了css文件，之后打包js的时候会把css文件一起打包，当打包的js文件被在html中使用的时候，被打包的css文件会自动的以
安装
cnpm install style-loader css-loader --save
配置
module:{
rules:[
{
test:/.tsx?$/,
use:{
loader:‘ts-loader’
}
},
{
//当遇到.css文件时，进行处理
test:/.css$/,
//执行顺序是从后往前执行的，因此，先执行的css-loader需要写在后面
use:[
{
loader:‘style-loader’
},
{
loader:‘css-loader’
}
]
}
]
}
这里注意的是，loader的使用是从后往前的，也就是如果要先用css-loader处理那么css-loader必须写在后面
style-loader核心配置
-
**insertAt：**style标签插入在哪一块区域；
-
**insertInto：**style标签插入指定的dom；
-
**singleton：**是否合并成一个style标签；
-
**tarnsform：**在浏览器环境下，在style被插入到页面前的阶段，用js对css进行修改，也就是先对css样式进行了修改，然后再将其插入到页面上；
前三项的具体用法，如下例
{
test:/.css$/,
//执行顺序是从后往前执行的，因此，先执行的css-loader需要写在后面
use:[
{
loader:‘style-loader’,
options:{
//top：将style标签插入在header标签里的最上面，
//bottom：将style标签插入header标签的最下面
insertAt:‘top’,
//值也可以是一个对象
//insertAt:{
// before:“#dom” //将style标签插入指定元素的前面，这种很少用
//}
// insertInto:‘#dom’ //将style标签插入指定元素的里面
singleton:true //将所有style合并成一个
}
},
{
loader:‘css-loader’
}
]
}
transform，值是一个字符串，代表用哪个文件来对css样式进行修改，比如
{
test:/.css$/,
//执行顺序是从后往前执行的，因此，先执行的css-loader需要写在后面
use:[
{
loader:‘style-loader’,
options:{
//top:将style标签插入在header标签里的最上面
insertAt:‘top’,
//是否合并style文件
singleton:true,
//值是一个字符串，指定一个文件对样式进行修改，值是文件的路径
transform:‘./transform.js’
}
},
{
loader:‘css-loader’
}
]
}
在tarnsform.js中
module.exports = function (css) {
if(window.screen.width<500){
css = css.replace(‘red’,‘yellow’)
}
return css
}
webpack会将css文件中的所有样式转成字符串传入，也就是说参数css就是在css文件中所有的css样式
css-loader
-
minimize：是否压缩css（在webpack4中移除了）
-
**module：**是否使用css模块化
-
alias：css中的全局别名（在webpack4中移除了）
{
test:/.css$/,
//执行顺序是从后往前执行的，因此，先执行的css-loader需要写在后面
use:[
{
loader:‘style-loader’,
options:{
//top:将style标签插入在header标签里的最上面，
//bottom：将style标签插入header标签的最下面
insertAt:‘top’,
//insertAt:{
// before:“#dom” //将style标签插入指定元素的前面，这种很少用
//}
// insertInto:‘#dom’ //将style标签插入指定元素的里面
singleton:true, //是否合并style文件
transform:‘./transform.js’ //值是一个字符串，指定一个文件对样式进行修改
}
},
{
loader:‘css-loader’,
options:{
//使用css模块化
module:{
//类名的命名规则：路径名，文件名，本来的名字，哈希值的前4位
//在webpack4中属性localIndentName写在module
//在webpack3中则是与属性module并列
localIdentName:“[path][name][local][hash:4]”
}
}
}
]
}
less，sass预处理语言
css的预处理语言是越来越流行了，和ts一样，less和sass并不难直接被浏览器识别，需要经过编译，转成css语言才可以被浏览器识别
安装
编译less的loader：less和less-loader
cnpm install less less-loader --save
编译sass的loader：sass-loader和node-sass
cnpm install sass-loader node-sass --save
配置使用
{
test:/.less$/,
use:[
{
loader:‘style-loader’,
options:{
//top:将style标签插入在header标签里的最上面
//bottom：将style标签插入header标签的最下面
insertAt:‘top’,
singleton:true, //是否合并style文件
transform:‘./transform.js’ //值是一个字符串，指定一个文件对样式进行修改
}
},
{
loader:‘css-loader’,
options:{
module:{
localIdentName:“[path][name][local][hash:4]”
}
}
},
{
loader:‘less-loader’
}
]
}
less-loader必须写在最下面，因为use数组中的内容是从最后往前使用的，如果先是css-loader或者其他，那么是不会识别.less文件的，所以必须先将less文件转成css文件，再对css文件进行进一步的编译；
提取css代码成独立文件
上面说的方法都是将css代码以style的方式插入html，那么如何提取css代码为单独的文件，不再是以style标签的形式插入，简单的说，分为三步：
-
安装插件，插件为：extract-text-webpack-plugin
-
改造loader处的写法，把use改为使用extarct-text-webpack-plugin
-
在plugin处添加，把extract-text-webpack-plugin加入到plugin里
安装
webpack3
计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？
-
HTTP 常用的请求方式，区别和用途？
-
HTTPS 是什么？具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛？
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛？
-
HTTP 如何实现长连接？在什么时候会超时？
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的，UDP 为什么不可靠？
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法
dentName:“[path][name][local][hash:4]”
}
}
},
{
loader:‘less-loader’
}
]
}
less-loader必须写在最下面，因为use数组中的内容是从最后往前使用的，如果先是css-loader或者其他，那么是不会识别.less文件的，所以必须先将less文件转成css文件，再对css文件进行进一步的编译；
提取css代码成独立文件
上面说的方法都是将css代码以style的方式插入html，那么如何提取css代码为单独的文件，不再是以style标签的形式插入，简单的说，分为三步：
-
安装插件，插件为：extract-text-webpack-plugin
-
改造loader处的写法，把use改为使用extarct-text-webpack-plugin
-
在plugin处添加，把extract-text-webpack-plugin加入到plugin里
安装
webpack3
计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？
-
HTTP 常用的请求方式，区别和用途？
-
HTTPS 是什么？具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛？
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛？
-
HTTP 如何实现长连接？在什么时候会超时？
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的，UDP 为什么不可靠？
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法
1028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
