第二天 webpack loader 的使用

第二天 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")

})