search

hexuanzhang / front-end

前端资源及文章
2 stars 0 forks source link

webpack--loader #13

Open hexuanzhang opened 7 years ago

hexuanzhang commented 7 years ago

应用于应用程序的资源文件中，通常用来做转换。它们都是函数（运行在nodejs中），将资源文件的源码作为入参，处理完后，返回新的源码文件。

特性

安装

npm install xx-loader -D

使用

require语句申明 如果非必须的话，或者你打算你的脚本运行于不可知的环境（nodejs和浏览器），否则尽量不要使用这种方式，而是使用配置约定来使用loaders

require("jade!./template.jade");
require("!style!css!less!bootstrap/less/bootstrap.less");

通过配置文件配置 通过配置中的正则表达式来绑定loader

{
module: {
loaders: [
{ 
test: /\.jade$/, 
loader: "jade" 
},
{ 
test: /\.css$/, 
loader: "style!css" 
},
{ 
test: /\.css$/, 
loaders: ["style", "css"] 
}
]
}
}

通过CLI配置 通过CLI绑定loaders来进行扩展

webpack --module-bind jade --module-bind 'css=style!css'

查询参数

Loader能通过查询字符串(类似于web)来传递参数，查询字符串被添加在loader后面，中间用?连接 如：url-loader?mimetype=image/png。 查询字符串的格式是依赖于loader的。大部分的loader接收普通的查询字符串(?key=value&key2=value2)和JSON对象（?{“key”:”value”,”key2”:”value2”}`）


require("url-loader?mimetype=image/png!./file.png");
{ 
test: /\.png$/, 
loader: "url-loader?mimetype=image/png" 
loader: 'url-loader',
query: {
mimetype: 'image/png'
}
}
webpack --module-bind "png=url-loader?mimetype=image/png"
hexuanzhang commented 7 years ago

css-loader

使用

CSS-loader读取css文件,另一个是Style-loader，将style标签插入到html页面

loaders: [
  { 
    test: /\.css$/, 
    loader: "style-loader!css-loader"
  },
  ...
]

参数

root

如果设置了root参数，root参数的值就会被添加到“/”的前面，然后会被css-loader处理

loaders: [
  { 
    test: /\.css$/, 
    loader: "style-loader!css-loader?root=./img" 
  },
  ...
]
url(/image.png) => url(./img/image.png)

modules

CSS MODULE是一种css in javascript的方式，当我们把一个css文件import到一个js模块时，这个css文件会暴露一个对象，这个对象映射所有的本地和全局css类名 使用css-loader时可以设置modules参数，开启这种模式。

.app{
  text-align: center;
}
loaders: [
  { 
    test: /\.css$/, 
    loader: "style-loader!css-loader?modules" 
  },
  ...
]
._2jCL78eMjlZHws9ajHxlDX{
  text-align: center;
}
// 在js中暴露的对象
{app: "_2jCL78eMjlZHws9ajHxlDX"}

localIdentName

通常modules参数还要通过localIdentName的配合来设置css的类名。在上文中我们看到没有设置localIdentName的css编译后是一串随机字符串，可读性很差，因此我们还需要对它的类名进行处理，这就用到了localIdentName 在CSS MODULE中，可以通过给类名设置:local或:global来决定它是否是全局的css类。设置了:local的类会被编译，而设置了:global的类则会被当成是全局的类，不会被编译。

.title{
  font-size: 16px;
}
.desc{
  text-align: center;
}
loaders: [
  { 
    test: /\.css$/, 
    loader: "style-loader!css-loader?modules&&localIdentName=[name]---[local]---[hash:base64:5]" 
  },
  ...
]
.app---title---103E5{
  font-size: 16px;
}
.app---desc---1LgG2{
  text-align: center;
}

:local(.title){
  font-size: 16px;
}
:global(.desc){
  text-align: center;
}
.app---title---103E5{
  font-size: 16px;
}
.desc{
  text-align: center;
}

minimize

css-loader中集成了压缩工具cssnano，上文的css设置minimize参数后，css会被压缩优化。

loaders: [
  { 
    test: /\.css$/, 
    loader: "style-loader!css-loader?minimize" 
  },
  ...
]

camelCase

camelCase参数会为类名新增一个驼峰命名的拷贝，这个参数也需要配合modules参数使用

.my-title{
  font-size: 16px;
}
loaders: [
  { 
    test: /\.css$/, 
    loader: "style-loader!css-loader?modules&camelCase" 
  },
  ...
]
{
  my-title:"_3I8_gyz8vp7gOxXNP7ljNv",
  myTitle:"_3I8_gyz8vp7gOxXNP7ljNv"
}

-XXX

设置-XXX参数，css-loader将不会处理某些css功能

css-loader?-url // 不处理 url(...)
css-loader?-import // 不处理 @import

参考

  1. css-loader用法