Comments (1)
less-loader、css-loader、style-loader插件作用
less-loader:用于加载.less文件,将less转化为css
css-loader:用于加载.css文件,将css转化为commonjs
style-loader: 将样式通过<style>标签插入到header中
先安装这几款插件
npm i style-loader css-loader less less-loader -D
在webpack.config.js文件中加入如下配置
'use strict'
const path = require('path')
module.exports = {
mode: 'production',
entry: {
index: './src/index.js',
search: './src/search.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
}
解析less主要是通过以上代码中的以下部分
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
这里有一点要注意,他们的解析过程是链式的,所以在use数组中下面的部分会先执行,所以他们的执行顺序其实是less-loader > css-loader > style-loader
webpack的加载从右往左进行?
其实为啥是从右往左,而不从左往右,只是Webpack选择了compose方式,而不是pipe的方式而已,在技术上实现从左往右也不会有难度。
函数组合:函数组合是函数式编程中非常重要的**。
函数组合的两种形式:一种是pipe,另一种是compose。前者从左向右组合函数,后者方向相反。
在Uninx有pipeline的概念,平时应该也有接触,比如 ps aux | grep node,这些都是从左往右的。
但是在函数式编程中有组合的概念,我们数学中常见的f(g(x)),在函数式编程一般的实现方式是从右往左,如
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const add1 = n => n + 1; //加1
const double = n => n * 2; // 乘2
const add1ThenDouble = compose(
double,
add1
);
add1ThenDouble(2); // 6
// ((2 + 1 = 3) * 2 = 6)
这里可以看到我们先执行的加1,然后执行的double,在compose中是采用reduceRight,所以我们传入参数的顺序编程了先传入double,后传入add1
那么其实也可以实现从左往右
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
const add1ThenDouble = pipe(
add1,
double
);
add1ThenDouble(2); // 6
// ((2 + 1 = 3) * 2 = 6)
所以只不过webpack选择了函数式编程的方式,所以loader的顺序编程了从右往左,如果webpack选择了pipe的方式,那么大家现在写loader的时候的顺序就变成从左往右了
compose : require("style-loader!css-loader!sass-loader!./my-styles.sass");
pipe : require("./my-styles.sass!sass-loader!css-loader!style-loader");
from fe-interview.
Related Issues (20)
- nuxt有哪些特性?为什么要用nuxt做服务端渲染?它解决了什么问题? HOT 1
- CSS Sprites(雪碧图)原理及其优缺点 HOT 1
- 图片懒加载原理及如何实现 HOT 1
- JS获取url参数的方法 HOT 1
- 手写实现一个合乎规范的Promise HOT 1
- requestAnimationFrame原理及兼容性封装 HOT 1
- 用过HappyPack吗?HappyPack有什么优点? HOT 2
- eslint忽略全局变量的方法 HOT 1
- webpack配置路径别名 HOT 1
- webpack添加路径别名后,vscode不能智能提示,如何解决? HOT 1
- 如何只用两行代码实现判断js中所有数据类型 HOT 1
- nrm和nvm HOT 1
- 不用window.open打开新窗口 HOT 1
- js变量提升 HOT 1
- js中精度问题及解决方案 HOT 2
- js实现普通数组去重&json数组去重 HOT 1
- 常见的js模板引擎
- js原生实现拷贝到剪贴板 HOT 1
- iframe内嵌网页未知高度如何自适应 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe-interview.