css-loader，less-loader，url-loader，babel-loader的安装及其配置

   由于webpack只能打包处理以 .js 后缀名结尾的模块，需要额外的loader加载器才可以处理其他类型的文件，如.css、 .less等相关文件

安装css-loader

//默认安装最新版本
npm i style-loader css-loader -D
//指定安装版本
npm i style-loader@3.0.0 css-loader@5.2.6 -D

在webpack.config.js的module中配loader规则

module.exports = {mode:'development',module:{//所有第三方文件模块的匹配规则rules: [//文件后缀名的匹配规则{test: /\.css$/,use: ['style-loader','css-loader']}//test指定什么类型文件，$表示以什么结尾的文件，use表示用什么方法去处理这样的文件//必须先是'style-loader'，后面才是'css-loader']}
}

调用规则
在“index.js”文件中通过“import”进行调用

// 导入样式（在webpack中，一切皆模块，都可以通过ES6导入语法进行导入和使用）
import './css/index.css'

安装less-loader

//默认安装最新版本
npm i less-loader less -D
//指定安装版本
npm i less-loader@10.0.1 less@4.1.1 -D

安装完成之后和“.css”一样需要在webpack.config.js的module中配loader规则

module.exports = {mode:'development',module:{//所有第三方文件模块的匹配规则rules: [//文件后缀名的匹配规则{test: /\.less$/,use: ['style-loader','css-loader','less-loader']}//test指定什么类型文件，$表示以什么结尾的文件，use表示用什么方法去处理这样的文件]}
}

调用规则
在“index.js”文件中通过“import”进行调用

// 导入样式（在webpack中，一切皆模块，都可以通过ES6导入语法进行导入和使用）
import './css/index.less'

安装url-loader

//默认安装最新版本
npm i url-loader file-loader -D
//指定安装版本
npm i url-loader@4.1.1 file-loader@6.2.0 -D

安装完成之后和“.css”一样需要在webpack.config.js的module中配loader规则

module.exports = {mode:'development',module:{//所有第三方文件模块的匹配规则rules: [//与上面类似//处理图片类型文件{test: /\.jpg|pan|gif$/,use: ['url-loader?limit-22222']},//limit用来指定图片的大小，单位是字节（byte），只有≤limit的图片才能被转换为base64格式，这里也可以不用加限值，如果不加限值的话就是去掉“?limit-22222”就行了]}
}

调用规则
在“index.js”文件中通过“import”进行调用

// 导入样式（在webpack中，一切皆模块，都可以通过ES6导入语法进行导入和使用）
//导入图片，得到图片文件
import logo from './image/logo.jpg'
//给image标签的src动态赋值
$('.box').attr('src',logo)

在“index.js”文件中需要设置

<!-- 需求：把/src/images/logo.jpg设置给src属性 --><img src="" alt="" class="box">

安装babel-loader

webpack只能打包处理一部分高级的JavaScript语法，对于一些webpack无法处理的高级JS语法，需要借助于label-loader 进行打包处理

npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D

安装完成之后和“.css”一样需要在webpack.config.js的module中配loader规则

module:{//所有第三方文件模块的匹配规则rules: [//处理webpack无法处理的高级语法{test: /\.js$/,use: 'babel-loader',exclude: /node_modules/},// 注意：必须使用exclude指定排除项，因为node_modules目录下的第三方包不需要被打包]}

配置完成之后还需要配置babel-loader
在项目目录下面，创阿金babel.config.js的配置文件，并在文件中进行如下配置

module.exports = {//声明babel可用的插件// 将来，webpack在调用babel-loader的时候会先加载plugins插件来使用plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

调用

//1. 定义名为info的装饰器
function info (target){// 2. 为目标添加静态属性target.info = 'Person info'
}// 3. 为Person类应用info 装饰器
@info
class Person {}//4. 打印Person的静态属性 info
console.log(Person.info)

css-loader，less-loader，url-loader，babel-loader的安装及其配置相关推荐

前端每日实战：114# 视频演示如何用纯 CSS 和混色模式创作一个 loader 动画
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqYroW 可交互视频此视频是可 ...
如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 ...
java-初识大前端Node.js、ES6、Npm、Babel、模块化规范、WebPack、Vue-element-admin本地安装问题及解决、Git安装及配置、uni-app
VS code安装安装成功配置自动补齐Emment Node.js node.js下载网址: http://nodejs.cn/ 安装成功! 概念 Node.js发布于2009年5月,由Ryan ...
Xamarin.Forms 中iOS通过URL Scheme判断应用是否安装
Xamarin.Forms 中iOS通过URL Scheme判断应用是否安装在移动应用开发中,经常需要判断一个app是否安装,iOS中有什么方式可以判断app是否安装呢? 这里介绍通过Url Sch ...
微信开发一服务器地址（URL）、令牌（Token）配置
前期准备工作准备工具:Tomcat服务器,阿里云服务器 Tomcat下载地址阿里云服务器(云翼计划) 阿里云阿里云服务器购买:学生可以使用云翼计划购买阿里云服务器,平均一个月12块左右.正 ...
Linux下EPICS的安装与配置——CSS安装与配置
本文继"Linux系统下EPICS的安装与配置"文章后,给出了客户端CSS新版本Phoebus的安装与配置. Phoebus是一个框架和一系列工具,用于监视和操作大型控制系统,例如 ...
如何写好.babelrc？Babel的presets和plugins配置解析
什么是Babel The compiler for writing next generation JavaScript. 官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器. 作为 ...
【转】如何写好.babelrc？Babel的presets和plugins配置解析
什么是Babel The compiler for writing next generation JavaScript. 官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器. 作为 ...
AST基础知识:环境的搭建与babel库的安装
本文环境为win10系统,兼容各win系统(只需区分32位及64位操作系统),linux环境请自行下载测试. 一.安装nodejs 安装地址: https://nodejs.org/zh-cn/dow ...
第十六天前端HTML、CSS、JavaScript详细总结（内置VSCode安装教程）
目录 HTML.CSS.JavaScript Web前端开发简介 1. HTML 1.1 介绍 1.2 快速入门 1.3 VS Code 安装使用 1.4 基础标签 1.4 图片.音频.视频标签 1. ...

css-loader，less-loader，url-loader，babel-loader的安装及其配置

安装css-loader

安装less-loader

安装url-loader

安装babel-loader

css-loader，less-loader，url-loader，babel-loader的安装及其配置相关推荐

最新文章

热门文章