通过上一篇文章相信大家已经明白了loader
的概念。那这篇文章继续介绍一些常用loader
,并展现它的强大之处
less
与sass
的功能都一样,这里我就以less
为例,介绍其对应loader
的用法。less
的语法对于浏览器那是必需不认识的,要处理成浏览器认识的需要借助两个模块,一个less
和一个less-loader
npm i less less-loader -D
结构目录如下图:index.css
内容如下:
#box{
width: 800px;
height: 500px;
border: 5px solid #999;
color: #00f;
/*background: green;*/
background: url(../images/img_01.jpg);
}
index.js
内容如下:
import '../css/index.css'; //引入css文件
import '../less/less.less'; //引入less文件
import img from '../images/img_01.jpg';
const newImg=new Image();
newImg.onload=()=>document.body.appendChild(newImg);
newImg.src=img;
less.less
内容如下
//如果对less不懂的同学,可以加我微信:kaivon
@w:200px;
@border:1px solid #f00;
#box{
width: @w;
border: @border;
ul{
margin: 0;
padding: 0;
list-style: none;
li{
height: 30px;
background: #ccc;
a{
color: #f00;
&:hover{ //&为上一层选择器
color: blue;
}
}
}
}
}
template.html
内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="box">
<p>我是陈学辉</p>
<ul>
<li><a href="#">red</a></li>
<li><a href="#">green</a></li>
<li><a href="#">blue</a></li>
</ul>
</div>
</body>
</html>
package.json
内容如下:
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.1",
"url-loader": "^1.0.1",
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
webpack.config.js
内容如下:
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
module.exports={
entry:'./src/js/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'js/index.js'
},
plugins:[
new HtmlWebpackPlugin({
title:'陈学辉',
template:'./src/template.html',
filename:'index.html'
}),
new MiniCssExtractPlugin({
filename:'css/index.css'
}),
],
devServer:{
host:'localhost',
port:1573,
open:true
},
module:{
rules:[
{
test:/\.css$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:'../'
}
},
'css-loader',
]
},
{
test:/\.less$/,
use:[ //把less编译到css文件里
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:'../'
}
},
'css-loader', //注意顺序
'less-loader'
]
},
{
test:/\.(jpg|png|gif)$/,
use:[
{
loader:'url-loader',
options:{
limit:5 * 1024,
outputPath:'images'
}
}
]
}
]
}
}
执行命令npm run dev
后浏览器里的内容正常显示,less
文件里的代码被编译成真正的css
代码,同时利用MiniCssExtractPlugin.loader
与css
一起合并到了index.css
文件里。
ES6
的语法大部分已经被各在浏览器所支持,当然除了万恶的IE
,但是部分新增API
很遗憾并不被浏览器所支持:比如内置对象新增的一些方法、Set
和Map
对象、Generator
等。React
与Vue
都支持一种语法叫JSX
,这种语法也是不被浏览器所支持的,对于这两个的处理我选择用Babel
,Babel
就是为了处理这哥俩而生的。关于Babel
的用法可以参考我录制的视频课程“NPM与模块化开发”
npm i babel-loader babel-core babel-preset-env babel-polyfill -D
npm i react react-dom babel-preset-react -D
index.js
内容如下
import '../css/index.css';
import '../less/less.less';
import img from '../images/img_01.jpg';
import 'babel-polyfill'; //处理ES6新增的API,需要导入这个模块
import React from 'react'; //react
import ReactDOM from 'react-dom'; //react
const newImg=new Image();
newImg.onload=()=>{
document.body.appendChild(newImg);
};
newImg.src=img;
//ES6
const fn=()=>console.log(123);
//map对象
const map=new Map();
map.set('name','kaivon');
console.log(map);
//Array.from方法
const strArr=Array.from('kaivon');
console.log(strArr);
//Object.assign方法
const t1={a:1};
Object.assign(t1,{b:2},{c:3});
console.log(t1);
//generator
function* bear(){
console.log('熊大');
console.log('熊二');
}
bear().next();
//react
ReactDOM.render(
<h2>这是JSX语法</h2>,
document.getElementById('box')
);
webpack.config.js
内容如下:
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
module.exports={
entry:'./src/js/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'js/index.js'
},
plugins:[
new HtmlWebpackPlugin({
title:'陈学辉',
template:'./src/template.html',
filename:'index.html'
}),
new MiniCssExtractPlugin({
filename:'css/index.css'
}),
],
devServer:{
host:'localhost',
port:1573,
open:true
},
module:{
rules:[
{
test:/\.css$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:'../'
}
},
'css-loader',
]
},
{
test:/\.less$/,
use:[ //把less编译到css文件里
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:'../'
}
},
'css-loader', //注意顺序
'less-loader'
]
},
{
test:/\.(jpg|png|gif)$/,
use:[
{
loader:'url-loader',
options:{
limit:5 * 1024,
outputPath:'images'
}
}
]
},
{
test:/\.js$/,
use:[
{
loader:'babel-loader',
options:{ //env针对的是ES的版本,它会自动选择。react针对的就是react
presets: ['env','react']
}
}
],
//exclude: /node_modules/, //不去检查node_modules里的内容,那里的js太多了,会非常慢
include:path.resolve(__dirname,'src/js'), //直接规定查找的范围
}
]
}
}
执行命令npm run build
后,把文件在IE里面打开看看,也是Ok的~
注意:如果用过babel
的同学可能知道还需要创建一个.babelrc
的文件,那里面还要写一个对象。但是在这里却不需要,是因为babel-loader
的options
里已经把内容添上了,就不需要创建文件了
文章浏览阅读1.5w次,点赞9次,收藏26次。简介一个创建某个文件到桌面快捷方式的BAT批处理.代码@echooff::设置程序或文件的完整路径(必选)setProgram=D:\Program Files (x86)\格式工厂.4.2.0\FormatFactory.exe::设置快捷方式名称(必选)setLnkName=格式工厂v4.2.0::设置程序的工作路径,一般为程序主目录,此项若留空,脚本将..._批处理创建桌面快捷方式
文章浏览阅读2k次。射频识别技术漫谈(6-10),概述RFID的通讯协议;射频ID卡的原理与实现,数据的传输与解码;介绍动物标签属性与数据传输;RFID识别号的变化等_芯片 ttf模式
文章浏览阅读1.1k次。今天小编心血来潮,为大家带来一个很有趣的项目,那就是使用 Python web 框架 Django 来实现支付宝支付,废话不多说,一起来看看如何实现吧。_django 对接支付宝接口流程
文章浏览阅读842次。Zabbix 5.0 LTS,跑了一年多了一直很稳定,前两天空间显示快满了,于是手贱清理了一下history_uint表(使用mysql truncate),结果折腾了一周。大概故障如下:然后zabbix论坛、各种群问了好久都没解决,最后自己一番折腾似乎搞定了。初步怀疑,应该是由于历史数据被清空后,zabbix需要去处理数据,但是数据量太大,跑不过来,所以来不及更新了(?)..._zabbix问题没有更新
文章浏览阅读296次。一、数据结构之字典 key-value
文章浏览阅读9.7k次,点赞3次,收藏13次。最近项目中遇到一个问题,是关于mybatis-plus的字段注解策略,记录一下。1问题调用了A组件(基础组件),来更新自身组件的数据,发现自己组件有个字段总是被清空。2原因分析调用的A组件的字段,属于基础字段,自己业务组件,对这个基础字段做了扩展,增加了业务字段。但是在自己的组件中的实体注解上,有一个注解使用错误。mybatis-plus封装的updateById方法,如果..._mybatisplus strategy
文章浏览阅读3.8k次。如何构建倒排索引,我们将这个过程叫做“索引构建”。如果我们的文档很多,这样索引就一次性装不下内存,该如何构建。硬件的限制 我们知道ram读写是随机的操作,只要输入相应的地址单元就能瞬间将数据读出来或者写进去。但是磁盘不行,磁盘必须有一个寻道的过程,外加一个旋转时间。那么只有涉及到磁盘,我们就可以考虑怎么节省I/O操作时间。【注】操作系统往往以数据块为单位进行读写。因为读一_为某一文档及集构件词项索引时,可使用哪些索引构建方法
文章浏览阅读836次。英特尔技术与制造事业部副总裁卞成刚7日在财富论坛间隙接受中新社记者采访时表示,该公司看好中国市场前景,扎根中国并以此走向世界是目前最重要的战略之一。卞成刚说,目前该公司正面临战略转型,即从传统PC服务领域扩展至所有智能设施领域,特别是移动终端。而中国目前正引领全球手机市场,预计未来手机、平板电脑等方面的发明创新将大量在中国市场涌现,并推向全球。持相同态度的还有英特尔中国区执行董事戈峻。戈峻
文章浏览阅读627次。https://blog.csdn.net/zrs19800702/article/details/53101213http://blog.csdn.net/lzw06061139/article/details/51445311https://my.oschina.net/linuxhunter/blog/654080rgw 概述Ceph 通过radosgw提供RES..._radosgw -c
文章浏览阅读3.7k次,点赞6次,收藏9次。我为什么选择ECharts ? 本周学校课程设计,原本随机佛系选了一个51单片机来做音乐播放器,结果在粗略玩了CN-DBpedia两天后才回过神,课设还没有开始整。于是懒癌发作,碍于身上还有比赛的作品没交,本菜鸡对硬件也没啥天赋,所以就直接把题目切换成软件方面的题目。写python的同学选择了一个时间序列数据的可视化曲线程序设计题目,果真python在数据可视化这一点性能很优秀。..._echarts 时间序列
文章浏览阅读1.6k次。事件类:/** * * * @className: EarlyWarnPublishEvent * * @description:数据风险预警发布事件 * * @param: * * @return: * * @throws: * * @author: lizz * * @date: 2020/05/06 15:31 * */public cl..._applicationeventpublisheraware
文章浏览阅读1.2k次。如需转载请注明出处!点击小图片转到图片查看的页面在Android开发中很常用到,抱着学习和分享的心态,在这里写下自己自定义的一个ImageView,可以实现类似微信朋友圈中查看图片的功能和效果。主要功能需求:1.缩放限制:自由缩放,有最大和最小的缩放限制 2居中显示:.若图片没充满整个ImageView,则缩放过程将图片居中 3.双击缩放:根据当前缩放的状态,双击放大两倍或缩小到原来 4.单指_imageview图片边界回弹