webpack的重要组成--Loaders+插件

javaScript

Loaders

在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等..因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。对应各种不同文件类型的资源, Webpack 有对应的模块 loader。比如 CSS用的是 css-loader, 其他还有很多:
http://webpack.github.io/docs/list-of-loaders.html

Loader可以理解为是资源和模块的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结构。这样，我们就可以通过require来加载任何类型的模块或文件。最后即可实现webpack首页的展示

Loader的特性：

• Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。
• Loader 可以同步或异步执行。
• Loader 运行在 node.js 环境中，所以可以做任何可能的事情。
• Loader 可以接受参数，以此来传递配置项给 loader。
• Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
• Loader 可以通过 npm 发布和安装。
• Loader 可以访问配置。
• 插件可以让 loader 拥有更多特性。
• Loader 可以分发出附加的任意文件。

具体使用

通常情况下，Loaders都会被命名为XXX-loader，比如json-loader。首先我们通过npm来安装具体的的loader:

npm install xxx-loader --save-dev

关于使用，有三种使用Loader的方法：

• 通过require声明来使用（类似于模块）
• 在配置文件中使用
• 在命令行交互界面中直接配置使用

require声明Loaders

官方文档中并不建议采用此种方法。

基本的语法就是，通过分隔符！来区分Loaders与resource。我们来看看栗子:

require("./loader!./dir/file.txt");
// => 使用文件"./loader.js"来转换 ./dir/file.txt
require("jade!./template.jade");
// => 使用 "jade-loader" (已经使用npm安装到程序中)来转换文件“./template.jade”
require("!style!css!less!bootstrap/less/bootstrap.less");
// => 文件"bootstrap/less/bootstrap.less" ("bootstrap"模块已经通过npm安装到程序中)首先经过less-loader的转换，继而链式输出给css-loader来转换，最后输出给style-loader来转换

值得注意的是，如果在链式操作的时候，是从右到左。

配置文件中配置Loaders

我们来看看如何在文件中操作：

{
    module: {
        loaders: [
            { test: /\.jade$/, loader: "jade" },
            // => "jade" loader is used for ".jade" files
            { test: /\.css$/, loader: "style!css" },
            // => "style" and "css" loader is used for ".css" files
            // Alternative syntax:
            { test: /\.css$/, loaders: ["style", "css"] },
        ]
    }
}

命令行中配置

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

携带有参数的情况

Loaders既然实际上是一个函数，那么自然可以携带有参数，只不过通过以上三种方法来携带参数需要类似于网络传输过程中的形式--借助？分隔符来表示：

requie

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

配置文件

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

命令行交互

webpack --module-bind "png=url-loader?mimetype=image/png"

插件

当使用Loader已经基本将包生成的时候，那么你可能会使用插件来协助你做更多的后续处理。在webpack中，插件分为内置插件、第三方插件。一般情况下可以查找满足你的要求的第三方插件。

想要使用插件，那么需要现在配置文件中添加plugins：

var webpack = require('webpack')
module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css'}
    ]
  },
  plugins: [
    //BannerPlugin是内置插件，作用是在输出文件的开头添加一些字符串
    new webpack.BannerPlugin('This file is created by frank')
  ]
}

如果想要使用第三方插件，那么就需要使用npm来安装对应的插件：

//install
npm install component-webpack-plugin
//use
var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
    plugins:[
        new ComponentPlugin()
    ]
}

一些常用的插件可以到下面的网站中查找：
http://webpack.github.io/docs/list-of-plugins.html

Loader与插件的用法区别

Loader处理单独的文件级别并且通常作用域包生成之前或生成过程中。
而插件则是处理包或者chunk级别，且通常是bundle生成的最后阶段。

参考文档：
1.http://webpack.github.io/docs/