第二天 webpack loader 的使用
1、webpack 默认只能打包以 .js 结尾的文件 处理不了其他后缀的文件
2、 由于代码中包含了index.css 这个文件因此webpack 默认处理不了
3、 当webpack 发现某个文件处理不了的时候,会查找webpack.config.js这个配置文件 看module.rules 这个数组中时候配置了对应的loader加载器
4、 webpack 把index.css 这个文件,先转交给最后一个loader进行处理(先转交给css-laoder)
5、 css-loader 处理完之后往前转交给 style-loader
6、style- loader 处理完之后 继续往前提交 发现没有下一个loader处理器了,就把它处理好的结果提交给webpack
7、 webpack 把处理好的index.css 文件代码 合并 到打包输出的 /dist/bundle.js中,最中生成打包好的文件
开始学习
对于小的图片可以直接 百度搜索 Base64 把图片转化为 base64的格式 ,这种方法可以加快小图片的展示(类似于精灵图的 方式,避免了网络请求 -->去转换base64),但是转化后的图片体积会变大,所以适用于 小图片 不适用于 轮播图 或者首页展示图这种 大体积图片
安装
npm i style-loader@ css-loader@5.2.6 -D // 配置.css结尾的文件
npm i less-loader@10.0.1 less@4.1.1 -D // 配置以.less结尾的文件 less 为 less-loader 所依赖的内置依赖 不需要在下面规则数组里面声明。
npm i url-loader@4.1.1 file-loader@6.2.0 -D // 配置.路径 结尾的文件(.jpg|.pan|.gifs等) 跟上面相同 file-loader 为 url-loader 所依赖的内置依赖 不需要在下面规则数组里面声明。
配置
webpack配置对象 文件 webpack.config.js 里面增加一个新的对象
moudle: { // 所有第三方文件模块的匹配规则
rule:[// 文件后缀名的匹配规则
//test 表示匹配的文件类型 use 表示对应要调用的loader
// 注意 use 数组中指定的loader 顺序是固定的 loader 调用的顺序是由后至前的
{test: /\.css$/,use:['style-loader','css-loader',]},
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 配置 处理图片的加载器 如果只有一个 加载器需要配置 可以不写数组 直接写字符串
// 这里的 ? 跟路由里面的 问号一样 后面跟的都是配置的参数 这里的limit 这个参数是说 限制 后面数子的字节长度 图片大小超过这个字节就不转化为base64的格式 显示图片原始路径
{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=2999' },
]
}
追加
// 导入样式(在webpack中,一切皆模块 都可以通过es6语法进行导入使用)
// 导入样式(在webpack中,一切皆模块 都可以通过es6语法进行导入使用)
import './css/index.css'
import './css/index.less'
// 1、导入图片
import logo from './images/logo.png'
// 2、给img标签的src 动态赋值
$('.box').attr('src',logo)
// 2、定义jquery的入口函数
$(function () {
// 3、实现隔行变色
// 奇数行 odd 偶数行 even(注意不是以顺序排 而是索引,所以 0是偶数 是第一位)
$('li:odd').css("background-color","red")
$('li:even').css("background-color","green")
})