webpack-loader简简单单配置入门

1、webpack简单介绍

webpack本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包，如图webpack会把我们项目中使用的多个依赖模块，打包构建成可运行的几个静态文件，它提供了十分丰富的配置项和扩展能力，这里我们说一下loader配置

2、loader简单介绍

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！通俗点讲就是loader在webpack中担任翻译官的角色

2.1、loader的匹配规则

module.exports = {
  module: {
    rules: [ 
      {
        test: /\.jsx?/,
        include: [ 
          path.resolve(__dirname, 'src'),
        ],
        use: 'babel-loader',
      },
    ],
  },
}

1. loader 的匹配规则中有两个最关键的因素：一个是匹配条件，一个是匹配规则后的应用

2. 匹配条件在官方文档中称为：resource 通常使用文件的绝对路径来进行匹配除此之外还有比较少用到的 issuer

3. 上述代码中的 test 和 include 都用于匹配 resource 路径是,resource.test resource.include的简写

module.exports = {
  // ...
  rules: [ 
      {
        resource: { // resource 的匹配条件
          test: /\.jsx?/, 
          include: [ 
            path.resolve(__dirname, 'src'),
          ],
        },
        // 如果要使用 issuer 匹配，便是 issuer: { test: ... }
        use: 'babel-loader',
      },
      // ...
    ], 
}

2.2、loader规则条件配置

大部分场景我们只需要test匹配即可，但应对一些复杂的情况我们可以通过以下规则进行匹配。

• { test: ... } 指定特定后缀名文件
• { include: ... } 指定特定的文件路径
• { exclude: ... } 排除特定的路径
• { and: [...] } 必须匹配数组中所有条件
• { or: [...] } 匹配数组中任意一个条件
• { not: [...] } 排除匹配数组中所有条件

上述的所谓条件的值可以是：

• 字符串：必须以提供的字符串开始，所以是字符串的话，这里我们需要提供绝对路径
• 正则表达式：调用正则的 test 方法来判断匹配
• 函数：(path) => boolean，返回 true 表示匹配
• 数组：至少包含一个条件的数组
• 对象：匹配所有属性值的条件

简单的例子：

rules: [
  {
    test: /\.jsx?/, // 正则
    include: [
      path.resolve(__dirname, 'src'), // 字符串，注意是绝对路径
    ], // 数组
    // ...
  },
  {
    test: {
      js: /\.js/,
      jsx: /\.jsx/,
    }, // 对象，不建议使用
    not: [
      (value) => { /* ... */ return true; }, // 函数，通常需要高度自定义时才会使用
    ],
  },
],

上述多个配置形式结合起来就能够基本满足各种各样的构建场景了，通常我们会结合使用 test/and 和 include&exclude 来配置条件，如上述那个简单的例子。

2.3、loader配置

在当前webpack当中, module.rules 匹配规则最重要的还是用于配置 loader，我们可以使用 use ：

rules: [
  {
    test: /\.less/,
    use: [
      'style-loader', // 直接使用字符串表示 loader
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1
        },
      }, // 用对象表示 loader，可以传递 loader 配置等
      {
        loader: 'less-loader',
        options: {
          noIeCompat: true
        }, // 传递 loader 配置
      },
    ],
  },
],

use可以是一个数组如上图

也可以是一个对象：use: { loader: 'babel-loader', options: { ... } }

配置多个loader如上图、一个模块需要经过多个loader处理转换

2.4、loader执行顺序

配置多个loader，执行是从最后一个loader开始，一步步往前、即下一个loader接收上一个loader处理的结果进行处理如上面: style.less 文件会途径 less-loader、css-loader、style-loader 处理，成为一个可以打包的模块。

3、常用的loader总结

样式

• css-loader 指解析css文件中代码
• style-loader 将css模块作为样式导出到DOM中
• less-loader 加载和转义less文件
• sass-loader 加载和转义sass/scss文件
• postcss-loader 使用postcss加载和转义css/sss文件 加载框架
• vue-loader加载和转义vue组件
• angualr2-template--loader加载和转义angular组件
• react-hot-loader动态刷新和转义react组件中修改的部分,基于webpack-dev-server插件需先安装,然后在webpack.config.js中引用react-hot-loader Files文件
• raw-loader 加载文件原始内容(utf-8格式)
• url-loader 多数用于加载图片资源,超过文件大小显示则返回data URL
• file-loader 将文件发送到输出的文件夹并返回URL(相对路径)
• html-withimg-loader 打包html文件中的图片 脚本转换编译
• script-loader 在全局上下文中执行一次javascript文件，不需要解析
• babel-loader 加载ES6+ 代码后使用Babel转义为ES5后浏览器才能解析
• typescript-loader 加载Typescript脚本文件
• coffee-loader 加载Coffeescript脚本文件