防抖：频繁中的频繁。 快速特别快速。 eg: 比如一个搜索框 搜索值每次都请求后台 此时监听你是输入了几个就监听了几次 使用keyup。对快速操作进行防抖动:学名防抖 y 100毫秒 先不发 等待下一次请求 如果true取消上一次请求 走下一次 如此反复。在拿到两个值一起请求
Webpack 五个核心
Entry
入口，指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
Output
输出，指示webpack打包后的资源bundles输出到哪里去，以及如何命名
Loader
Loade让webpack能够去那些非javascript文件（webpack自身只处理js文件）翻译官
plugins
插件可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
Mode
模式：分为两种 development(开发模式)和production(生产模式)
dev：能让代码本地调试运行的环境
pro：能让代码优化上线运行的环境
webpack不能处理css、img资源 所以要进行相应配置
用的是Common.js
loader的使用一般都是 1.下载 2.使用（配置loader）plugins: 1.下载 2.引入 3.使用
// 使用node.js resolve拼接 获取绝对路径
const resolve = resolve('path')
// const htmlwebpackPlugin = require('html-webpack-plugin')
// 配置
module.exports = {
//入口文件
entry: './src/index.js',
// 输出
output:{
// 输出文件名
filename: 'build.js',
// 输出的路径 绝对路径
// __dirname 是node.js变量，代表当前文件的目录的绝对路径 会输出到build目录下 叫build.js文件
path: resolve(__dirname,'build'),
},
// loader配置
module:{
// 规则
rules:[
// 详细的loader配置
// 不同文件必须配置不同loader处理
{
// 正则 匹配哪些文件
test: /\.css$/,
// 怎么处理呢 通过use处理
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序，从右到左，从下到上 依次执行
// 上一步完成后,创建style标签，将生成好的js中的样式资源插入进去，添加到head生效
'style-loader',
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader',
]
},
{
test: /\.less$/,
use:[
'style-loader',
'css-loader',
// 将less文件编译成css文件
// 需要下载less-loader 和less
'less-loader',
]
},
{
// 问题：处理不了html中img图片 只能处理css中引入图片
test: /\.(jpg|png|gif)$/,
// 需要下载file-loader 和url-loader 因为file-loader是依赖url-loader
loader: 'url-loader',
// loader的配置
options:{
// 图片大小限制，小于8kb就会被base64处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大
limit: 8 * 1024
// url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs 所以解析会报错
// 解决：关闭url-loader模块化，使用commonjs解析
esModule:false,
//给图片重命名 [hash:10] 取图片的前10位 ext取文件原扩展名
name: '[haseh:10].[ext]',
// 给图片增加目录结构
outputPath: 'imgs',
}
},
{
test: /\.html$/,
// 处理html中img图片的（负责引入img，从而能被url-loader处理）
loader: 'html-loader'
},
// 打包其他配置（除了html/js/css资源以外的资源）
{
// 排除资源
exclude: /\.(css|js|html)$/,
loader: 'file-loader',
}
]
},
// 插件
plugins: [
//打包html资源
// 默认会创建一个空的html 引入打包输出的所有资源 （JS/CSS）
// 需要有结构的html文件
new htmlwebpackPlugin({
// 复制一个html文件 并自动引入打包输出所有资源
template : './src/index.html'
})
],
//模式
mode: 'development',
mode: 'prodeuction',
// 开发服务器devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer指令为：webpack-dev-server
devServer:{
// 运行项目的目录
contentBase:resolve(__dirname,'build'),
//启动gzip压缩
compress: true,
port： 3000,
}
}
