webpack Loader的使用教程及常用的loader[入门篇]

[lengziyu]

介绍loader

webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。
loader机制的存在让webpack拥有了无限的可能性，让webpack几乎可以容纳一切前端需要的资源。同时合理得利用loader也有助于我们在架构项目的时候省去很多重复工作。

loader特性

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

Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。大多数情况下，我们通过 npm 来管理 loader，但是你也可以在项目中自己写 loader 模块。

使用loader

安装loader：

$ npm install css-loader style-loader

在页面中引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中：

/* style.css */
body { background: yellow; }

在入口页面添加style.css：

require("!style!css!./style.css") // 载入 style.css

重新编译打包，刷新页面，就可以看到黄色的页面背景了。

如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。

将 entry.js 中的 require("!style!css!./style.css") 修改为 require("./style.css") ，然后执行：

$ webpack entry.js bundle.js --module-bind 'css=style!css'

显然，这两种使用 loader 的方式，效果是一样的。

常用loader

预处理篇：

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

例子：

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"}
  ]
}

js处理篇：

• babel-loader es6转换
• jsx-loader 支持jsx语法

例子：

npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader

新建一个名字为.babelrc的文件：

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

新建一个名字为webpack.config.js文件：

module.exports ={
 entry: './entry.js',
 output: { path: __dirname,
 filename: 'bundle.js'
 },
 module: {
loaders: [
  {test: /\.js$/, loader: "babel", exclude: /node_modules/},
  {test: /\.jsx$/, loader: "jsx-loader"}
  {test: /.css$/, loader: 'style!css'} ]
  }
};