我即将学习大约 3 年的后端，接触后端4年左右，想整理这个书单很久了，
因为经常有同学问，后端怎么学，后端读什么书，我会说一些我在学习路上读的书，虽然整理的书不多， 每一本书都是读书没完没了的感觉。
以下大部分都是我读过的书，或者身边人推荐的书，每本我都有一些相关的推荐，如果你听到更好的书，欢迎推荐。
.JS
JavaScript Intermediate Programming （4th Edition） [1]。
现在建议学习第四版webpack书籍，因为很多第三版还是用ES5句型讲解的，目前主流是ES6句型。刚开始的时候，这是我读的第一本JS书，也是实验室导师推荐的，这本书很厚，真的需要忍着脾气去读，DOM、BOM、JS 基本句型，我先把这种大概放了一会儿，然后去实践项目， 有点我看不懂，然后尝尝这本书，跟着我的脾气，还是喜欢练习。
JavaScript You Don't Know （Volume II）[2]。
豆瓣评分9.3
这本书，
真是一本神书，我先看了中级编程，看完我对一些示波器、闭包、原型链的理解，看完这本书，我立刻打开了任杜的第二脉，顿时活泼起来。
ECMAScript6 Primer [3]。
ECMAScript6 简介 [4]。
豆瓣评分8.8
这本书属于工具书，建议使用电子版，只是翻阅一些常用的ES6句型，当我打算实习时，我读了一些常用的句型如（Map，Set，Proxy，Promise，生成器，异步，模块等）。（其实如果对你有帮助，还是可以买实体书支持作者的，虽然电子版可以免费阅读，写一本书需要付出很大的力气。）
JavaScript Ninja Secrets （2nd Edition）[5]。
豆瓣评分8.5
这本书是我工作时的导师推荐的，我还没看过webpack书籍，听说帮他解了很多疑惑。
.CSS
CSS World [6]。
作者是张新旭，可以说是CSS领域的鼻祖。我买了这本书还没看，不看的原因不是他不好，而是他最近不常写CSS，哈哈哈。买的时候，我看了看它的目录，可以说它包含了CSS中一些比较重要的场景。目录的名称也特别吸引人。提到了块级元素、盒子模型、浮点、级联规则等的基本用法。
CSS 解密[7]。
豆瓣评分9.4
作者是Lea Verou，W3CCSS工作组的客座专家，设计CSS语言的委员会成员之一，之前曾在W3C担任开发人员的声音。目前在麻省理工学院从事人机交互领域的研究。
作者真的太大了...再次W3CCSS专家和麻省理工学院...看过这本书的人都会惊讶，CSS怎么会玩成这样？如果你想改进你的CSS，这本书不容错过。这本书刚出版时我就买了，后来献给了实验室里的男同伴。
框架 Vue
Vue2 文档 [8]。
Vue3 文档 [9]。
如果说豆瓣评分是9.9分，那么0.1分就怕它的骄傲了。
Vue的学习建议直接在官网上阅读，太详细了，像一本书。
反应
反应。[10]
官网教程真的很贴心，如果你构建一个 React 应用程序，会一步一步教你，还会说一些哲学思想。
反应小书[11]。
这本书是一本开源书籍，面向有一点后端基础并且.js React 的朋友。
“深入 React 技术堆栈” [12]。
豆瓣评分8.1
我买了大约
17年前，这是我买的第一本React书，也是唯一的React书。
节点
NodeJS 在七天内 [13]。
开源书，这本书是
只有 200 页左右，你可以一次看完，可以通过示例快速熟悉一些 Node API，其实现在很多 API 已经过时了（虽然 Node 版本迭代太快，现在是 15 倍），安装旧版本的 Node 上手，还是一本好书。
“平原中的节点.js”[14]。
豆瓣评分8.6
它清楚地解释了节点.js的基本原则以及如何使用节点.js进行工程项目开发，这是高级的首选。
节点.js设计模式 [15]。
原书中文版豆瓣评分9.5，买了英文版...在云端，您可以尝试英文版。
节点.js：十几个C++扩展[16]。
我
这本书刚出来的时候就买了...而且基础还不够，看这本书需要一些C++积累，还要特意买C++入门计划好好学习，并发现......周期太长，无法坚持下去，而且因为公司没有这种方便的场景应用程序，所以在自己写了一个C++插件（）之后，这本书被搁置了。
工程网络包
通俗易懂的语言网络包[17]。
“深度Webpack电子版”[18]。
很多人对这本书抱怨，说它很基础，不够深，而且比较落后。这是真的，我认为官方的 webpack 文档似乎非常前沿，没有一个让人们一下子理解它。跟着这本书+支持GitHub的例子，写完所有的例子（不需要很多时间），可以说你对webpack有了大致的了解。
学习 webpack 有哪些困难？
各种外设插件版本都不匹配！
我想添加一个加载器/插件，各种版本都不兼容，各种错误！由于大多数菜鸟安装webpack插件都会安装到最新版本，而大多数最新版本都会有各种问题，所以真的很劝阻......
经过几次快速迭代，webpack 3x 和 4x 的插件机制不同，现在是 5x。
所以要有一个固定的版本，按照完整的流程去对它有一个整体的了解，看完一本书去了解那些也是值得的。有了这种整体理解，我相信无论你学习4X还是5X，你都可以做云。
打字稿
深入理解TypeScript[19]。
开源电子书，是学习 TypeScript 的良好开端，我很快就通过了书和官网的例子，有了大致的了解，想要深入学习 TS 可能还需要练习~
“重新学习TS” [20]。
哥哥写的重绘TS
A也很好，虽然我用的TS不多，正好在写一些中级类库的时候，发现了阿宝哥写的文章，觉得受益匪浅。
计算机基础设计模式
JavaScript 设计模式 [21]。
用故事情节的模式坦率地解释JS的设计模式。
算法基础
“图形算法” [22]。
豆瓣评分8.4
小白也能看懂的算法，可以说对初学者很有帮助，电子版我看过，如果想在算法领域真正提升，那就看下面的书吧。
算法简史[23]。
豆瓣评分9.2
这本书很物理，读起来很秃，而且是
真正齐全，上面的例子都是伪代码写的，也很难理解，跟着实验再做一遍会很有收获。
网络基础知识
原文源自：webpack踩坑（二）——图片的路径与打包
刚开始使用webpack的朋友很容易陷入图片打包的坑，比如打包图片的地址错误或者有些图片无法打包到我们的目标文件夹（bundle）中。 下面我们来分析一下webpack项目中图片的应用场景。
实际生产中，图片的参考形式有以下几种：
1、HTML文件中img标签的src属性引用或者嵌入的样式引用
<img src="photo.jpg" /> <div style="background:url(photo.jpg)"></div>
2、CSS文件中背景图片等设置
.photo { background: url(photo.jpg); }
3.在JavaScript文件中动态添加或更改图像引用
var imgTempl = ''; document.body.innerHTML = imgTempl;
4.ReactJS中图像的引用
import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { render() { return (); } } ReactDom.render(, document.querySelector('#container'));
网址加载器
在webpack中引入图片需要依赖加载器url-loader。
安装：
npm install url-loader --save-dev
其实你可以将其写入配置中，然后与其他工具模块一起安装。
webpack.config.js文件中的配置如下：
module: { loaders: [ { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192' } ] }
test属性表示可以匹配的图像类型，不仅可以是png、jpg，还可以是gif等，用竖线分隔。
loader前面的limit数组代表图片打包限制。 这个限制并不是说超过限制就不能打包，而是当图片大小大于限制时，会手动转成base64编码参考。 上面的例子中，小于8192字节的图片正常打包，大于8192字节的图片以base64的形式引用。
在url-loader前面，不仅可以使用limit数组，还可以使用name数组来指定图片包的目录和文件名：
module: { loaders: [ { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]' } ] }
上例中的name数组指定在打包根目录（output.path）下生成一个名为images的文件夹，并在原始图片名称前添加一个8位的哈希值。
示例：项目目录如下
main.css中引用同级images文件夹下的bg.jpg图片
background-image: url('./images/bg.jpg');
通过前面的配置，使用$webpack命令打包代码，生成如下目录
在打包目录中webpack图片打包，css文件和images文件夹保持相同的层次结构，无需更改任务即可访问图像。 不同的是，打包后的图片中添加了哈希值，并且在bundle.css文件中也引入了带有哈希值的图片。
background-image: url('images/f593fbb9.bg.jpg');
（上面的例子中采用了单独封装css的技术，只是为了演示方便）
公共路径
output.publicPath表示资源的发布地址。 配置该属性后，包文件中相对路径引用的所有资源都将被配置的路径替换。
output: { path: 'dist', publicPath: '/assets/', filename: 'bundle.js' }
main.css
background-image: url('./images/bg.jpg');
捆绑包.css
background-image: url(/assets/'images/f593fbb9.bg.jpg');
该属性的好处是，配置镜像CDN地址时，可以在本地开发时引用本地镜像资源，在线打包时将所有资源指向CDN。
不过需要注意的是，如果没有明确的发布地址，不建议配置该属性，否则会让你打包的资源路径非常混乱。
JS 中的图像
第一次使用webpack进行项目开发的同学会发现js或者react中引用的图片并没有打包到bundle文件夹中。
正确的写法应该是以模块化的形式引用图片路径，这样引用的图片才能成功打包到bundle文件夹中
js
var imgUrl = require(''./images/bg.jpg''), imgTempl = ''; document.body.innerHTML = imgTempl;
反应
render() { return (); }
HTML 中的图像
由于webpack对HTML的处理不是很好webpack图片打包，所以将图片资源打包在HTML文件中相对来说是最麻烦的。 这里需要引用一个插件——html-withimg-loder
$ npm install html-withimg-loader --save-dev
webpack.config.js 添加配置
module: { loaders: [ { test: /.html$/, loader: 'html-withimg-loader' } ] }
引用bundle.js中的html文件
import '../index.html';
这样就可以将html文件中的图片打包到bundle文件夹中了。
