webpack中loader加载器的使用及原理(常用的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。