标签：family top pac 全局配置 com json 编写程序 re模块 日志
一、简介
webpack本身只能处理js模块，Loader可以理解为模块和资源的转换器，它本身是一个函数，接受文件作为参数，返回转换的结果。因此，我们就能通过require来加载任何类型的模块和文件。
特点：
（1）Loader可以通过管道方式链式调用，每个loader可以自愿转换为任意格式传递给下一个loader，但最后一个loader必须返回js；
（2）同步或异步执行；
（3）运行与node.js环境中
（4）可以通过npm进行安装
（5）可以接受参数，以此来传递配置项给loader；
（6）loader可以通过文件扩展名（或正则表达式）绑定给不通类型的文件
命名规则：按照惯例，而非必须，loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。
二、安装及使用方法
::安装
npm install css-loader style-loader
在引用 loader 的时候可以使用全名 json-loader，或者使用短名 json。
使用方法：
（1）在require()引用模块时添加
例如： 在页面中引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中。
//载入style.css
require(‘!style-loader!css-loader!./style.css‘);
（2）在webpack全局配置中绑定
详见常用loader介绍。
（3）通过命令行的方式使用
在引入时直接使用：
在打包执行时：
webpack entry.js build.js --module-bind ‘css=style-loader!css-loader‘
::有些环境下可能需要使用双引号
webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"
三、常用loader
css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css
sass-loader scss编译器
less-loader less编译器
postcss-loader scss再处理
1、js处理
{
test: /\.js?$/,
exclude: /node_modules/,
loader: ‘babel‘,
query: {
presets: [‘es2015‘, ‘stage-2‘, ‘react‘]
}
}
（1）babel-loader 转码器
Babel是一个转码器，可以将ES6语法转换为ES5语法，这样就可以用ES6编写程序，而不用担心现有环境是否支持。
例如：
//转码前
arr.map(item => item + 1); //箭头函数
//转码后
arr.map(function(item){
return item + 1;
});
第一步：Babel的配置文件 .babelrc，存放到项目的更目录下。
所有Babel工具和模块的使用，都必须先写好.babelrc。
{
‘presets‘:[
‘es2015‘,
‘react‘,
‘stage-2‘
],
‘plugins‘:[]
}
①presets字段设定转码规则，官方提过一下的规则集，可根据需要安装。
::ES2015转码规则
npm install --save-dev babel-preset-es2015
::react转码规则
npm install --save-dev babel-preset-react
::ES7不同阶段语法提案的转码规则（共有四个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3
②plugins字段是babel插件。
例如:Ant Design 中需要按需加载antd脚本和样式
npm install --save-dev antd babel-plugin-import
{
"plugins": [
["import", { libraryName: "antd", style: true }]
]
}
第二步：babel-core
有的代码需要调用Babel的API进行转码，就要使用babel-core模块。
npm install babel-core --save-dev
（2）jsx-loader jsx编译器
npm install --save-dev jsx-loader
2、css/sass/less 处理
npm install --save-dev css-loader style-loader sass-loader less-loader
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
3、文件处理
npm install --save-dev url-loader file-loader
{
test: /\.(jpg|png)$/,
loader: "url-loader?limit=8192"
},
{
test: /\.svg$/,
loader: ‘url-loader?limit=100000‘
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: ‘file-loader‘
},
4、json处理
npm install --save-dev json-loader
{
test:/\.json$/,
loader:‘json-loader‘
}
四、loader一览表
| 扩展名 |
语义 |
loader举例 |
| .js |
returns module exports |
babel-loader |
| .ts |
returns module exports |
ts-loader |
| .coffee |
returns module exports |
coffee-loader coffee-redux-loader |
| .jsx |
returns module exports (react component) |
jsx-loader react-hot-loader!jsx-loader |
| .json .json5 |
returns json value |
json-loader json5-loader |
| .txt |
return string value |
raw-loader |
| .css |
returns nothing, side effect of adding style to DOM |
style-loader!css-loader style-loader!css-loader!autoprefixer-loader |
| .less |
returns nothing, side effect of adding style to DOM |
style-loader!css-loader!less-loader |
| .scss |
returns nothing, side effect of adding style to DOM |
style-loader!css-loader!scss-loader |
| .style |
returns nothing, side effect of adding style to DOM |
style-loader!css-loader!stylus-loader |
| .png .jpg .jpeg .gif .svg |
returns url to image |
file-loader url-loader |
| .woff .ttf |
returns url to font |
file-loader url-loader |
| .wav .mp3 |
returns url to audio |
file-loader url-loader |
| .mpeg .mp4 .webm .ogv |
returns url to video |
file-loader |
| .html |
returns HTML as string |
html-loader |
| .md .markdown |
returns HTML as string |
html-loader!markdown-loader |
| .jade |
returns template function |
jade-loader |
| .hbs .handlebars |
returns template function |
handlebars-loader |
Loader转换器
标签：family top pac 全局配置 com json 编写程序 re模块 日志
原文地址：http://www.cnblogs.com/zuozuo-blog/p/6560475.html
