webpack--加载器(loader)
加载器loader
webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中引入CSS文件!
当我们项目中用js引入css 就会出现解析打包失败的情况
加载器配置:webpack在打包时,会根据js文件中的引用文件中的引入语法,去加载其他文件;然后读取他文件中,webpack只能识别js和json文件。
需要加载器loader去按照对应的文件编码进行解析
不同文件类型就要去使用不同的规则去解析,不同规则就不用的加载器
css-loader&style-loader
css-loader解析css文件
style-loader把 css-loader 生成的内容,用 style 标签挂载到页面的 head 中
1.npm install css-loader style-loader --save-dev
//加载器配置loader,
module:{
rules:[
{test:/\.css$/,use:["style-loader","css-loader"]}
]
}
}
外部文件形式生成css资源
npm i mini-css-extract-plugin --save-dev
module: {
rules: [
//运行bundle时直接以style标签形式动态写入到页面
{test:/\.css$/,use:["style-loader","css-loader"]},
{
test: /\.css$/,//css生成到css文件中,项目中以<link>形式引入使用
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[hash].css' //css生成到css文件中,项目中手动以<link>形式引入使用
})
]
file-loader
项目中引入了常见类型(好多类型, 比如视频音频图片等等媒体编码)的文件,可以使用file-loader将其打包
npm i file-loader --save-dev
//webpack.config.js文件:
module: {
rules: [
//直接以style标签形式动态写入到页面
{test:/\.css$/,use:["style-loader","css-loader"]},
//项目中引入了以下结尾的文件就会启动file-loader
{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
]
}
ts-loader
将 TypeScript 转为 JavaScript
npm install ts-loader webpack typescript --save-dev
项目中新建一个tsconfig.json文件(这是ts编译需要的配置文件)
//webpack.config.js文件:
module: {
rules: [
//直接以style标签形式动态写入到页面
// {test:/\.css$/,use:["style-loader","css-loader"]},
{
test: /\.css$/,
//css生成到css文件中,项目中以<link>形式引入使用
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
{ test: /\.ts$/, use: 'ts-loader' },
]
},
babel-loader
Babel 是一个 JavaScript编译器,它是一个工具链,主要的用途就是在旧的浏览器或环境中将ECMAScript 2015+ 代码转换为向后兼容的 js 代码。babel-loader就是用babel工具将ES6转成ES5的一种加载器. 在webpack打包时遇到js文件,就交给babel处理。
npm install babel-loader @babel/core @babel/preset-env webpack -D
//webpack.config.js文件
module: {
rules: [
//直接以style标签形式动态写入到页面
{test:/\.css$/,use:["style-loader","css-loader"]},
{
test: /\.css$/,
//css生成到css文件中,项目中以<link>形式引入使用
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
{ test: /\.ts$/, use: 'ts-loader' },
//exclude:/node_module/ 意思是下载的模块不转码,其他js文件转码
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
},
总结:babel-loader 很慢!解决办法:要排除 node_modules,参考文档中的 loaders 配置的 exclude 选项。
sass-loader
把Sass代码转化为css代码
npm install sass-loader sass webpack --save-dev
//webpack.config.js文件:
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader', //不用单独引入 直接运行js代码 动态写入页面
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
],
},
webpack--加载器(loader)相关推荐
- android 加载器loader详解
Loaders loader在android 3.0之后才被引入,它简化了在activity和fragment中异步加载数据的步骤(个人认为简化是次要的,更重要的是优雅的实现了异步加载),loa ...
- Node.js webpack 加载器
问题:webpack 默认只能打包处理以 .js 后缀名结尾的模块,以下导入会报错 import './css/1.css' 打包处理css文件 1 npm i -d style-loader css ...
- webpack加载器打包样式表中的图片和字体
前言 index.html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- 从零开始操作系统------MBR直操硬盘、内核加载器
本文基于郑纲的<操作系统还原>,仅为个人学习笔记,前期的虚拟机配置等不再详细记录,其中不理解或者出错的地方还望提出意见! 从零开始操作系统------MBR直操显卡 硬盘 存储逻辑 为了更 ...
- webpack中loader加载器(打包非js模块)
通过loader打包非js模块 我这儿用VScode为编辑器 在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非. js后缀名结 尾的模块,webpack 默认处理不了, ...
- 需要了解的常用Webpack插件配置-loader加载器
我们都知道通过安装和配置第三方插件,可以使我们的webpack拓展更多的功能,虽然之后开发项目不需要我们自己去进行这些繁琐的配置,但是我们需要知道这些,在必要时我们可以去做出修改 比如我们在初识web ...
- Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
- webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块 在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
- webpack使用加载器来加载CSS样式
前言: 对于webpack来说,每个文件都是一个模块,比如css.js.html.jpg等. 对于不同的模块,就得需要不同的加载器(Loaders)来处理,所以加载器是webpack最重要的功能. 安 ...
最新文章
- git安装+错误:Failed to install ‘IRkernel‘ from GitHub: Git does not seem to be installed on your system
- 【 C 】字符分类函数
- c#创建可以为空类型
- Android 第三课 构建简单的用户界面
- JavaWeb第五讲 Web核心基础之HTTP协议
- 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)
- 微商分销代理商城源码-代理等级和升级条件
- activity 、window与view的关系 (上)
- Html之实例练习(轮播图片、放大镜效果、面板拖动)
- python免费教程视频-Python免费视频教程
- MySql:Unknown collation: ‘utf8mb4_0900_ai_ci‘
- CountDownLatch理解
- 专业网站设计的实施步骤及有关疑难问题汇编
- date比较大小 mybatis_面试官:给我说说你使用Mybatis的过程中遇到过哪些坑?
- centos7服务器如何通过trunk模式接入交换机
- 2021年微软研究博士奖研金名单出炉!三位华人博士生入选,每人42000美元
- 游吟诗人之中二病犯了
- 10、私网与公网的转换---NAT网络地址转换技术
- textContent 和 innerText
- C++中二维数组的动态创建于处理(zzl
热门文章
- LDPC编码技术研究
- 任正非在华为日本研究所说了什么 看这12句话就够了
- 外卖和快递行业数据_年轻人“变了”?外卖、快递行业,为何能吸引千万从业者?...
- Window10 磁盘如何分区(扩展卷操作)
- Pokemon Go泄露隐私,不合情但合理
- d619: 奇摩知识+
- 南北桥的作用一功能和特点
- RouterOS 设置静态ARP绑定
- resnet18实现猫狗图片的分类
- linux拷贝5g文件,电脑使用U盘复制5G文件提示“复制文件过大无法复制”如何解决...