webpack中loader加载器的使用及原理

时间: 2017-11-29阅读: 3452标签: loader

webpack的loaders是一块很重要的组成部分。我们都知道webpack是用于资源打包的,里面的所有资源都是“模块”,内部实现了对模块资源进行加载的机制。但是Webpack本身只能处理 js模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。  Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果,例如可以使用loader加载器可以快速编译预处理器(less,sass,coffeeScript)。 Loader 可以在require()引用模块的时候添加,也可以在 webpack 全局配置中进行绑定,还可以通过命令行的方式使用。


loader的特性是: 

loaders可以串联,他们应用于管道资源,最后的loader将返回javascript,其它的可返回任意格式(传递给下一个loader)

loaders 可以同步也可以异步

loaders在nodejs下运行并且可以做一切可能的事 loader接受参数,可用于配置里 

loaders可以绑定到extension/RegExps 配置 

loaders可以通过npm发布和安装 正常的模块儿可以到处一个

loader除了 loaders可以访问配置 插件可以给loaders更多的特性

loaders可以释放任意额外的文件


安装loader

npm install xxx-loader --save-dev

常用的loader加载器有哪些?

1.loaders之预处理

css-loader 处理css中路径引用等问题 
style-loader 动态把样式写入css 
sass-loader scss编译器 
less-loader less编译器 
postcss-loader scss再处理

webpack.config.js的配置:

npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader //安装
//配置
module: {
  loaders: [
    {test: /\.css$/, loader: "style!css?sourceMap!postcss"},
    {test: /\.less$/, loader: "style!css!less|postcss"},
    {test: /\.scss$/, loader: "style!css!sass|postcss"}
  ]
}


2.loader的 js处理

babel-loader:转化ES6代码
jsx-loader:识别js中的 jsx 语法

安装:npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader

新建一个名字为.babelrc的配置文件:

{   
	"presets": ["es2015","react"],   
	"plugins":["antd"] 
}

webpack.config.js文件配置:

module: {
	loaders: [
	  {test: /\.js$/, loader: "babel", exclude: /node_modules/},
	  {test: /\.jsx$/, loader: "jsx-loader"}
    ]
}


3.其他loader加载器

url-loader: 图片处理 npm install --save-dev url-loadr
file-loader: 文件加载 npm install --save-dev file-loader 
json-loader:json处理 npm install --save-dev json-loader 
raw-loader: html处理 npm install --save-dev raw-loader

webpack.config.js文件配置: 

module: {
  loaders: [
    {test: /\.(jpg|png)$/, loader: "url?limit=8192"},
    {test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,loader: 'file'},
    {test: /\.json$/,loader: 'json'},
    {test: /\.html$/,loader: 'raw'},
  ]
}


在配置module的loaders。loaders是一个数组,里面的每一个对象都用正则表达式,对应着一种配对方案。loader加载器用于将不同的文件加载到js文件中,比如url-loader用于在js中加载png/jpg格式的图片文件;css/style loader用于加载css文件;less-loader加载器是将less编译成css文件;不同的处理器通过!分隔并串联起来。这里的loader是可以省略掉-loader这样的,也就是原本应该写成style-loader!css-loader!sass-loader。


fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告合作文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯