js css加载器,webpack的CSS加载器的使用
什么是loader
loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载一个coffeeScript或者Babel文件。
loader的解析
loader的解析类似模块,一个loader模块会导出一个方法并且可被nodejs写为可兼容的JavaScript,通常情况下通过npm来管理loader,但你也可以把loader放在自己的应用里。
webpack中常用的加载器
css-loader 处理css中路径引用等问题
用于在js中加载css,解释@import和url()
options
alias: 解析别名
importLoaders(@import): 在css-loader前应用的loader的数目,默认为0
Minimize: true or false 是否开启css代码压缩,比如压缩空格不换行
modules: 是否开启css-module
module.exports = {
...
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', {
loader: 'css-loader',
options: {//当css文件中又引用了其他的css的时候,需要设置importLoaders
importLoaders: 1
}
}]
}]
}
};
style-loader 动态把样式写入css
加载的css作为style标签内容插入到html中,以形式在html页面中插入css代码
options
insertAt: 插入位置
insertInto: 插入到指定的dom
singleton: true or false,多个样式是否只生成一个标签
postcss-loader
postcss-loader:为了浏览器的兼容性,有时候我们必须加上-webkitm, -ms, -moz等前缀。目的就是让页面可以在每个浏览器上正常运行。postcss是一个CSS的处理平台可以帮CSS实现更多的功能。
用法:
安装postcss: npm install postcss-loader autoprefixer
配置文件
webpack.config.js:
module: {
rules: [{
test: /\.css$/
loader: 'style-loader!css-loader!postcss-loader'
}]
}
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')//在postcss-loader中引入autoprefixer插件
]
}
或者
const autoprefixer = require('autoprefixer');
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
plugins() {
return [autoprefixer];
}
}
}]
}]
}
less-style
添加对webpack的LESS支持。当遇到less文件时,先交给less-loader处理,然后交给css-loader,最后交由style-loader处理,然后执行webpack打包
module: {
rules: [{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}]
}
要启用CSS的source map,你需要将sourceMap选项传递给less-loader和css-loader
CSS SourceMap信息文件,里面存储着位置信息。随着代码增多,我们会对代码进行压缩,代码压缩之后进行调bug定位会非常困难,于是引入sourceMap记录压缩前后的位置信息,当产生错误时直接定位到未压缩前的位置,方便调试。简单来说就是记录压缩的翻译文件,通过这个文件可以找到你的对应源码
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: ['style-loader', 'css-loader', {
loader: 'less-loader',
options: {
sourceMap: true
}
}]
}]
}
};
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
js css加载器,webpack的CSS加载器的使用相关推荐
- gmod的css模块放哪里,webpack打包css报错找不到模块?
环境:webpack3.10.0 webpack.config.js配置如下: const path = require('path'); const HtmlWebpackPlugin = requ ...
- vue基础,加少量的webpack,以及脚手架搭建vue项目
这是我学习vue基础时候的笔记,在b站上跟着敲的,一开始是有道云笔记的形式,为了上传到博客整理了两个小时改成了markdown的形式,喜欢的点个赞,谢谢. 文章目录 一. vue基本使用 1. 实例参 ...
- webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块 在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
- webpack中loader加载器配置postCss自动添加CSS兼容前缀
配置postCSS自动添加css的兼容前缀 前言 在这里我使用VScode为编辑器 html文件中 <!DOCTYPE html> <html lang="en" ...
- webpack教程——css的加载
首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...
- uiwebview 加载本地js、css、img,html从网站加载
资源文件都是放在根目录下 1.index.html <html> <head> <title>My test Page</title> <link ...
- angular的html引入js,在AngularJS中的文件夹中加载JavaScript和CSS文件
AngularJS不支持你想要的东西,但是你可以看看Grunt或Gulp等构建工具,它们可以让你"构建"你的应用程序.在您的情况下,这些工具可以查找CSS文件并将它们连接成一个文件 ...
- php 动态加载JavaScript文件或者css文件
1. 动态加载JS文件 第一种方法: test.php <script language="JavaScript" src="test6.php?str=i lov ...
- webpack之css/js/html文件的压缩
文件压缩分三种类型js,css,html. 1.JS文件的压缩: uglifyjs-webpack-plugin webpack4以上已经内置了js的压缩插件uglifyjs-webpack-plug ...
最新文章
- 湘南学院校企计算机班,2020湘南学院重点学科名单特色专业有哪些?
- 【传智播客】Javaweb程序设计任务教程 黑马程序员 第二章 课后答案
- Android操作HTTP实现与服务器通信
- 面象对象设计6大原则之六:迪米特原则
- JavaSE基础知识(6)—异常和异常处理
- 用递归函数和栈操作逆序一个栈
- 15. (附加)链表是否有环(C++版本)
- Codeforces.100633J.Ceizenpok's formula(扩展Lucas)
- android sftp 编辑器,VSCode编辑器插件之SFTP工具
- 20180514-A · Star Wars Survey · ggplot2 ggdraw geom_bar facet_grid magick 柱状图 条形图 · R 语言数据可视化 案例 源码
- 耗费两小时整理电子入行学习资源
- python题目-回文数判断
- 使用PS让图片制作出渐变效果
- 【易错点 学习笔记】Solidity语法constant/view/pure
- make 及 make clean 的作用
- 激活 win10 企业版2016长期服务版本
- 生产制造追溯系统-再说条码打印
- linux dnw工具,dnw for linux(pc)
- 简单的几句话让你理解”什么是备份、容灾、集群、负载均衡”
- php 页码,php页码怎么实现
热门文章
- ABAP function module 的使用
- 通过环境变量注入的方式启动SAP Spartacus B2B模块
- 一步步创建ABAP post exit增强
- SAP ABAP Netweaver里进程能够申请的最大内存
- App in Scala
- SAP Netweaver gateway framework序列化
- SAP HANA数据库里对中文字符串排序的实现
- Fiori应用里application dependency里奇怪的manifest url是从哪来的
- IBASE read header
- BusinessPartner Relationship in WebUI and Fiori