深圳模板网站建设哪里有seo排名优化
loader概述
在实际开发过程中,webpack默认只能打包处理以 '.js' 后缀名结尾的模块,其他非 '.js' 后缀名结尾的模块,webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错
loader 加载器的作用: 协助 webpack 打包处理特定的文件模块,比如:
- css-loader 可以打包处理 '.css' 相关的文件
- less-loader 可以打包处理 '.less' 相关的文件
- babel-loader 可以打包处理 webpack 无法处理的高级JS语法
打包处理 css 文件
1. 运行以下命令,安装处理 css 文件的 loader
npm i style-loader@3.0.0 css-loader@5.2.6 -D2. 在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
module: {//所有第三方文件模块的匹配机制rules: [//文件后缀名的匹配规则 匹配到test指定的文件类型 使用use中对应的loader{test: /\.css$/, use: ['style-loader', 'css-loader']}]}其中,test 表示匹配的文件类型,use 表示对应要调用的loader
注意:
- use 数组中指定的 loader 顺序是固定的
- 多个 loader 的调用顺序是: 从后往前调用,webpack 把 index.css 这个文件先转交给最后一个 loader 进行处理(先转交给css.loader),当 css-loader 处理完毕之后,会把处理的结果,转交给下一个 loader(转交给style-loader),当 style-loader 处理完毕之后,发现没有下一个 loader 时,九八处理的结果转交给 webpack,webpack 将 style-loader 处理的结果合并到 /dist/bundle.js 中,最终生成打包好的文件
打包处理 less 文件
1. 运行以下命令安装 less-loader 以及 less
npm i less-loader@10.0.1 less@4.1.1 -D2. 在 webpack.config.js 的 module -> rules 数组中,添加规则:
module: {//所有第三方文件模块的匹配机制rules: [//文件后缀名的匹配规则 匹配到test指定的文件类型 使用use中对应的loader{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}]}
打包处理样式表中与 url路径 相关的文件
1. 运行以下命令安装 url-loader 和 file-loader
npm i url-loader@4.1.1 file-loader@6.2.0 -D2. 在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
module: {//所有第三方文件模块的匹配机制rules: [//文件后缀名的匹配规则 匹配到test指定的文件类型 使用use中对应的loader//处理 url路径 的loader{test: /\.jpg|png|gifs/, use: 'url-loader?limit=22229'}]}其中 '?' 之后的时 laoder 的参数项:
- limit 用来指定图片的大小,单位是字节(byte)
- 只有 ≤limit 大小的图片,才会被转为 base64 格式的图片
- 使用base64获取图片可以防止发起不必要的请求,可以将小图片转换为base64格式,过大的图片不适合此方法
打包处理 js 文件中的高级语法
webpack 只能打包处理一部分高级的 Javascript 语法,对于一些 webpack 无法处理的高级 js 语法,需要借助于 babel-loader 进行打包处理,例如 webpack 无法处理下面的 Javascript 代码:
//定义了名为 info 的装饰器
function info(target) {//为目标添加静态属性 infotarget.info = 'Person info'
}//为 Person 类应用 info 装饰器
@info
class Person {}//打印 Person 的静态属性 info
console.log(Person.info);安装 babel-loader 相关的包
运行如下命令安装对应的依赖包
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D使用 babel-loader
//使用 babel-loader 处理高级的 JS 语法 exclude 为排除项
//配置 babel-loader 的时候 只需要把自己的代码进行转换
//一定要排除 node_modules 目录中的 JS 文件 因为不需要担心第三方包的兼容性
{test: /\.js$/, use: 'babel-loader', exclude: /node-modules/}其中的 exclude 为排除项,排除此目录中的js文件
配置 babel-loader
在项目根目录下,创建名为 babel.config.js 的配置文件,定义 Babel 的配置项如下:
module.exports = {//声明 babel 可用的插件plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}
代码合集
index.html
<!DOCTYPE html>
<html lang="zh"><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>Document</title><!-- <script src="./index.js"></script> --><!-- <script src="../dist/main.js"></script> --><!-- <script src="../dist/index.js"></script> --><!-- 需要加载和引用内存中的生成的js文件 --><script src="/index.js"></script></head><body><ul><li>第 1 个li</li><li>第 2 个li</li><li>第 3 个li</li><li>第 4 个li</li><li>第 5 个li</li><li>第 6 个li</li><li>第 7 个li</li><li>第 8 个li</li><li>第 9 个li</li></ul><!-- 把 src/images/logo.png 设置给 src 属性 --><img src="" alt="" class="box"></body>
</html>
index.js
//使用 ES6 导入语法 jQuery
import $ from 'jquery'
//导入样式 (在 webpack 中 一切皆模块 都可以通过 ES6 导入语法进行导入和使用)
import './css/index.css'
import './css/index.less'//导入图片 得到图片文件
import logo from './images/logo.png'
//给 img 标签的 src 动态赋值 attr() 设置或返回被选中的元素属性
$('.box').attr('src', logo)//定义 jQuery 的入口函数
$(function() {//实现奇偶行变色//奇数行为红色$('li:odd').css('background-color', 'red');$('li:even').css('background-color', 'pink');//even 0 是偶数//odd 1 是奇数
})//定义装饰器函数
function info(target) {target.info = 'Person info.'
}//定义一个普通的类
@info
class Person{}console.log(Person.info)index.css
li {list-style: none;
}index.less
html, body, ul {margin: 0;padding: 0;li {line-height: 30px;padding-left: 20px;font-size: 12px;}
}babel.config.js
module.exports = {//声明 babel 可用的插件//将来 webpack 在调用 babel-loader 的时候 会先加载 plugins 中的插件进行使用plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}webpack.config.js
const path = require('path')//导入 html-webpack-plugin 插件 得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')//new构造函数 创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({//指定源文件的存放路径 指定要复制哪个文件template: './src/index.html',//指定生成文件的存放路径filename: './index.html'
})//使用 node.js 中的导出语法 向外导出一个 webpack 的配置对象
module.exports = {//代表 webpack 运行的模式 可选值有两个 development 和 production//结论: 开发的时候 要使用 development ,因为追求的是打包速度,而不是体积//反之: 发布上线的时候用 production 因为追求的是体积小 而不是打包快mode: 'production',// entry: '指定要处理哪个文件'entry: path.join(__dirname, './src/index.js'),// 指定生成的文件要存放到哪里output: {//存放的目录path: path.join(__dirname, './dist'),//生成的文件名filename: 'index.js'},//通过一个plugins数组 把实例导入插件中 插件的数组 将来 webpack 在运行时会加载并调用这些插件plugins: [htmlPlugin],devServer: {//初次打包完成后 是否自动打开浏览器open: true,//实时打包所使用的主机地址host: '127.0.0.1',//实时打包所使用的端口号port: 80},module: {//所有第三方文件模块的匹配机制rules: [//文件后缀名的匹配规则 匹配到test指定的文件类型 使用use中对应的loader{test: /\.css$/, use: ['style-loader', 'css-loader']},//处理 less 文件的 loader{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},//处理 url路径 的loader{test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229'},//使用 babel-loader 处理高级的 JS 语法 exclude 为排除项//配置 babel-loader 的时候 只需要把自己的代码进行转换//一定要排除 node_modules 目录中的 JS 文件 因为不需要担心第三方包的兼容性{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}]}
}package.json
{"name": "change-rows-color","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "webpack serve"},"keywords": [],"author": "","license": "ISC","dependencies": {"jquery": "^3.6.0","path": "^0.12.7"},"devDependencies": {"@babel/core": "^7.14.6","@babel/plugin-proposal-decorators": "^7.14.5","babel-loader": "^8.2.2","css-loader": "^5.2.6","file-loader": "^6.2.0","html-webpack-plugin": "^5.3.2","less": "^4.1.1","less-loader": "^10.0.1","style-loader": "^3.0.0","url-loader": "^4.1.1","webpack": "^5.42.1","webpack-cli": "4.9.0","webpack-dev-server": "3.11.2"}
}