WebPack Loader

WebPack Loader

什么是webpack loader？

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。
( 注：此段来自webpack中文指南 )

loader 的基本格式

require方式：

require("my-loader!./my-awesome-module");

config中:

module: {
    preLoaders: [
        { test: /\.coffee$/, loader: "coffee-loader" }
    ],
    loaders: [
        { test: /\.js$/, loader: 'babel' },
        { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        { test: /\.(woff|otf|eot|woff2|ttf|svg|png|jpg)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=30000&name=[name]_[hash].[ext]'}
    ],
    postLoaders: [
        { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
}

链式loader

require("style-loader!css-loader!less-loader!./my-styles.less");

往往一个loader并不能满足我们的需求，这时候我们就需要链式的格式来load我们的文件，链式方式采用 从右向左 的加载方式。如上面的事例，loader先将less文件通过less-loader转换成css文件，然后通过css-loader来处理css文件和其中的资源，最后通过style-loader将它翻译成一个可用 <style> 标签。
（链式的loader类似node中的管道）。

loader的加载顺序

按先后依次加载： preloaders => loaders => require(“my-loader!./my-awesome-module”) => postLoaders

require中的特殊写法可以组织config中的 loader

官方是这么写的：adding ! to a request will disable configured preLoaders
但我测试时 却是禁用了 loaders 而非 preLoaders

require("!raw!./script.coffee")

添加 !! 可以阻止当前文件采用 preloaders , loaders , postLoaders
require("!!raw!./script.coffee")

官方是这么写的：adding -! to a request will disable configured preLoaders and loaders but not the postLoaders
但我测试时 却是禁用了 loaders 和 postLoaders
require("!raw!./script.coffee")

Query parameters 查询参数

loader 通过参数查询的方式来筛选需要加载的文件，大多数的loader都拥有以下格式的查询

require方式：

require("url-loader?mimetype=image/png!./file.png");

config:

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

or

{
    test: /\.png$/,
    loader: "url-loader",
    query: { mimetype: "image/png" }
}

这里举个栗子

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

这个url loader 将加载mimetype为image/png格式的图片文件

{ test: /\.png$/, loader: "url-loader?limit=10000" }

这个url loader 将小于10kb的 png转换为 DataUrl 其余的则作为单独的文件引用

loader 列表

webpack 官方Api: list of loaders

常用loader

• file: 加载url 文件返回一个url链接。
• url: 同file，但能通过limit返回一个DataUrl。
• coffee： 将coffee-script 转换成 javascript
• babel：将ES6转换成ES5 （也能转换普通script 所以只要是script都用他就可以了）
• style: 将一入的css 文件转换成 <style> 标签插入到Dom中
• css: 解析css文件
• less: 解析less文件
• sass: 解析sass文件

如有错误，欢迎指正