首先，让我们留言
既然留言的人那么多，有的人不去墙上，也没关系
我会逐一读，只要遇到接下来的两本，还有机会收到这本书规则1：对于我们的公众号，提出
有价值的建议是好的，或者对公众号吐槽，但如果可靠并得到我们的认可，请发送！并挑选出最好的，给现金！！
规则2：说说你和我们公众号的故事，我们挑几个发！
关于书籍
这些书由复旦大学出版社出版
还有一个很大的福利
王老师说：如果你也想出版书籍，你要么不知道怎么出版书籍，要么你平时自己写博客，你不知道能不能出版书籍
可以请教王老师，希望您也能出版一本书！
王老师的陌陌
Python 3.5 是从零开始学习的
本书是专门为Python新手量身定做的，包括Python 3实际开发的重要知识点，包括：Python语言类型和对象、运算符和表达式、编程结构和控制流、函数、序列、多线程、正则表达式、面向对象编程、文件操作、网络编程、邮件收发、数据库操作等，提供Python爬虫、数据处理项目实例， 每章还安排了调试、答题、向往学、牛九测验等内容，帮助读者学会处理异常、解决学习问题、巩固知识、应用所学。
本书通俗易懂，实例丰富webpack 相关书籍，可读性强，可操作性强。它特别适合Python 3.x初学者，想要学习和了解Python3的程序员，也可以作为Python在线课程，培训和大学教学书籍。
Python + Spark 2.0 + Hadoop 机器学习和大数据实践
本书从通俗易懂的大数据和机器学习原理出发，运用直观的图形化方法描述大数据和机器学习的基本概念，如分类、分析、训练、建模、预测、机器学习（推荐引擎）、机器学习（二元分类）、机器学习（多元分类）、机器学习（回归分析）、数据可视化应用等。为了提高学习门槛，本书采用StepbyStep的教学方法，演示了机器学习和大数据技术案例的动手实际操作和示例程序，展示了如何在独立的Windows系统上通过VirtualBox虚拟机安装多机Linux虚拟机，如何改进Hadoop集群，进而改进Spark开发环境。对于有资质的企业和中学，参考书中介绍的建设过程，可以在多台物理计算机上搭建自己的平台，更容易更接近大数据和机器学习的真实运行环境。
本书特别适合学习大数据基础知识的初学者，更适合那些正在学习大数据理论和技术作为实际使用的教科书的人。
精通刮擦网络爬虫
本书深入而系统地介绍了Python的流行框架Scrapy的相关技术和用法。全书共14章，逻辑上可以分为基础和中级两部分，基础部分重点介绍Scrapy的核心要素，如蜘蛛、选择器、物品、链接等;中间部分讲解爬虫的中间话题，如登录认证、文件下载、JavaScript执行、动态网页爬取、HTTP代理的使用、分布式爬虫的编译等，配合项目案例讲解，包括网站实践，以及易讯、知乎、豆瓣、360爬虫案例等。
本书案例丰富，注重实践，代码注释简短，适合有一定Python语言基础，想学习编译复杂网络爬虫的读者。
深度学习在行动
本书梳理了深度学习的理论知识，对算法实现给出了通俗易懂的解释，包括深度学习模型、前馈神经网络、卷积神经网络、循环神经网络、深度正则化和优化，以及谷歌深度学习框架Tensorflow的使用。据悉，本书还提供了大量的案例和参考码，方便读者快速实践深度学习。本书作者曾就读于美国伯明翰学院，博士毕业后在美国普利茅斯学院从事研究工作，期间主持欧盟第七框架计划捐赠的国际合作项目子项目，在机器学习领域有深入的研究和丰富的经验， 数据挖掘、模式识别和大数据处理与分析。
本书可以作为高校计算机科学专业大专生或研究生的教材，也可以供对深度学习感兴趣的研究人员和工程师阅读和参考。
张量流深度学习应用实践
本书的总体指导思想是掌握深度学习的基本知识和特点，培养使用TensorFlow进行实际编程以解决图像处理相关问题的能力。主要内容包括：Python解释器的安装和使用，TensorFlow基本数据结构和使用，TensorFlow数据集创建和读取，人工神经网络，反馈神经网络，全频域神经网络的理论基础，深度学习模型的创建，模型特征，算法，ResNet，Slim，GAN等。本书指出了理论与实践的结合，重点介绍了TensorFlow编程在解决图像识别中的应用，提供了大量的数据集，并在代码中实现了深度学习模型供读者参考。
Vue .js在行动
本书基于 Vue.js2，它指导读者通过动手项目方法逐步学习 Vue .js。本书分为基础、高级和实用三部分。基础部分主要介绍 Vue .js 的核心功能;高级部分主要讲解后端工程 Vue .js的组件化和插件使用;实践部分重点开发两个完整的示例，涵盖大多数 Vue .js API。通过阅读本书，读者可以掌握 Vue .js 框架的主要 API 的使用、自定义指令、组件开发、单文件组件、渲染函数，以及使用 webpack 开发可重用的单页富应用程序。
本书示例丰富，注重实际实践，适合刚接触 Vue .js 或正式接触的开发者，也适合有 Vue .js经验但需要进一步改进的开发者。
节点.js开发的实际应用
本书以实际开发为原则，吸收了Node.js和框架的原生知识
实践为主线，详细介绍了 Node .js 开发的基本知识和相应的案例实践，包括 Node.js 的原生模块 http、net、fs、dns、path、assert 等，以及主流前沿 Express 框架、Meteor 框架、Koa 框架项目的实际使用，以及 Node.js Node .js 应用的部署等单元测试， 并为读者提供详细的源代码和代码注释。
本书共14章，分为4个部分，主要内容包括Node.js环境建设、Node.js编码规范、Node.js包管理机制、Node.js网络开发、Node.js文件模块使用、Node.js数据库开发、Node.js单元测试、前端框架React use、Express use、Koa框架使用、Meteor框架使用、Nginx使用、PM2使用、 节点.js包开发发布、个人博客建设、任务列表项等
本书内容丰富，典型示例实用，适合想要学习Node.js基础知识并了解Node.js实际使用的人，特别是想通过编码示例学习Node.js开发的人。
以上所有书籍均由北京大学出版社出版，但提供（每本书两份），谢谢复旦大学出版社，非常感谢王编辑webpack 相关书籍，我的书又耽误了一年
，
没有黑我，还给我寄书
为什么上面有nodejs和vue，主要是爬虫想要很强大，不学前端就做不到......到处都有js加密。
图片导入表格
在实际制作过程中，引入图片有以下几种形式
直接写html
标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack html打包</title>
</head>
<body>
<h1 id="title">
hello Webpack 2021
</h1>
<img src="./imgs/webpack.jpg">
</body>
</html>
在css中引入背景图片
.main{
width: 300px;
height: 300px;
background-image: url(./imgs/angular.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
border: 3px solid green;
}
在js中创建图片导入
import img from './imgs/webpack.jpg';
var imgElement = document.createElement('img');
imgElement.src = img;
document.body.appendChild(imgElement);
网址加载器
在webpack中引入图片需要依赖加载器url-loader。
安装
npm install url-loader -D
当然也可以写入配置中，后期与其他工具模块一起安装
"devDependencies": {
"css-loader": "^6.3.0",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"less": "^4.1.2",
"less-loader": "^10.0.1",
"style-loader": "^3.3.0",
"url-loader": "^4.1.1",
"webpack": "^5.58.1",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1"
}
webpack.config.js文件中的配置如下
module: {
loaders: [
{
test: /.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 图片大小小于20kb，就会base64处理
limit: 20 * 1024,
// url-loader默认使用es6模块化解析，html-loader引入图片使用的是commonjs规范
// 关闭url-loader的es6模块化，使用commonjs解析
esModule: false,
// outputPath: 'assets'
// 图片编译之后重命名
// [hash:10]获取图片hash前10位 [ext]取文件的原扩展名
name:'[hash:10].[ext]'
}
}
],
}
]
}
test 属性表示可以匹配的图像类型。 除了png、jpg、gif之外，还可以添加svg等，用竖线分隔。
在loader后面的选项中，减少一些关于url-loader的配置项：
然后通过上面的配置，在命令行控制台输入打包命令后webpack打包图片，可以看到创建页面如下：
最终输出打包目录文件如下：
html加载器
打包后发现html中导入的图片路径是硬编码的，不会相对构建，导致找不到图片webpack打包图片，使用html-loader处理html中的图片。
安装
安装和配置
npm i -D html-loader
webpack.config.js中的配置文件如下：
{
test: /.html/,
// 处理html文件中的img图片,负责引入img，从而可以被url-loader处理
loader: 'html-loader'
}
再次打包后可以看到html中的文件可以正常访问。
遇到的问题
项目实践中使用的是webpack5版本打包创建的文件。
问题描述
使用webpack5打包图片资源时，打包后图片无法打开，且存在重复的图片资源。
问题分析
1.webpack.config.js配置文件代码
/**
* webpack 的配置文件
* 指示 webpack 都做哪些工作
* loader: 1. 下载 2. 使用（配置loader）
* plugins: 1. 下载 2. 引入 3. 使用
* */
// resolve 用于拼接绝对路径的方法
const path = require('path');
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// webpack 打包的入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'main.js',
// 输出的路径
// --dirname是node.js的一个全局变量，表示当前执行脚本所在的目录
path: resolve(__dirname, 'build'),
publicPath: './'
// publicPath: '../build/'
},
// loader的配置
module: {
// 详细的loader配置
rules: [
{
// 匹配哪些文件
test: /.css$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序从下网上执行
// 创建style标签，将js中的样式资源进行插入，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中，里面的内容是字符串
'css-loader'
]
},
{
// 匹配哪些文件
test: /.less$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序从下网上执行
// 创建style标签，将js中的样式资源进行插入，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中，里面的内容是字符串
'css-loader',
// 将less文件编译成css文件
// 需要下载 less 和 less-loader
'less-loader'
]
},
{
// test: /.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
test: /.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
// 图片大小小于20kb，就会base64处理
limit: 20 * 1024,
// url-loader默认使用es6模块化解析，html-loader引入图片使用的是commonjs规范
// 关闭url-loader的es6模块化，使用commonjs解析
esModule: false,
// outputPath: 'assets'
// 图片编译之后重命名，[hash:6]获取图片hash前6位 [ext]取文件的原扩展名
name:'[hash:10].[ext]'
}
}
]
},
// {
// test: /.(html|js|css|less|jpg|png|gif)/,
// loader: 'file-loader',
// options: {
// name: '[hash:6].[ext]'
// }
// },
{
test: /.html/,
// 处理html文件中的img图片,负责引入img，从而可以被url-loader处理
loader: 'html-loader'
}
]
},
// plugins的配置
plugins: [
// 详细的plugins的配置
// html-webpack-plugin
new HtmlWebpackPlugin({
title: 'test',
// 功能：生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle(js/css)。
template: './src/test.html'
})
],
// 模式 默认是生产环境 production
mode: 'development',
// 开发服务器 devServer，主要用于自动化(自动化编译，自动化打开浏览器，有变动自动刷新浏览器~)
// 只会在内存中进行编译打包，不会有任何输出
devServer: {
static: {
directory: resolve(__dirname, 'build'),
},
hot: true,
// 端口号
port:8080,
// 自动打开默认浏览器
open:true,
// 启用 gzip 压缩
compress:true,
proxy:{
"/api":{
// 目标地址
target:"http://localhost:8888",
// 路径重写，默认情况下，我们的/api也会被写入到URL中，如果希望删除，可以使用
pathRewrite:{
"^/api":""
},
// 默认情况下不接受转发到https的服务器，如果希望支持，设置为false
secure:false,
// 是否更新代理后请求headers中的host地址
changeOrigin:true
}
}
},
// watch: true
}
发现配置文件没有问题，图片打包时使用了url-loader和file-loader。 考虑一下是否是这两个loader的问题。
查了webpack官网的资料，发现官方的说明如下：
当使用旧的资源加载器（例如 file-loader/url-loader/raw-loader 等）重复时，可以通过将资源模块的类型设置为“javascript/auto”来解决此问题。 所以我们在webpack5中使用这个loader时，需要添加：
type: 'javascript/auto'
之后使用webpack打包，发现图片可以正常访问。
