Webpack笔记（二）：使用Loader

Loader 用于将模块的源代码进行转换（预处理）。在import或者加载文件时，通过不同的loader对不同格式的文件进处理，如：将不同语言的文件（如TypeScript）转换为JavaScript、将scss转换为css等等。

一、使用

官方文档给出三种使用loader的方法：

配置：在 webpack.config.js 文件中的module关键字下指定loader
内联：在import语句内显示指定loader，以!分隔
CLI：通过 CLI 使用 loader

a. CLI

webpack --module-bind 'css=style-loader!css-loader'

上例中对于css文件交给了css-loader以及style-loader去处理

b. 内联

在（包括但不限于）import后面使用，如：

import Styles from 'style-loader!css-loader!./styles.css';

这种写法可以覆盖配置文件中的任意loader，执行顺序为从后向前，也就是说，先执行css-loader，再执行style-loader。也可以在loader后面添加查询参数，如：css-loader?a=b!，也可以是json对象{"a":"b"}。但这种写法会导致loader配置散乱且不好定位错误，因此不推荐。

c. 配置

配置即是在配置文件中添加module字段，它决定了如何处理模块。
module.rules用来配置模块的处理规则，为数组形式，每一个数组项都描述了一种规则。每一项规则大致如下：

匹配condition：主要通过 test，exclude，include ，resource以及 issuer 项来匹配文件；
应用result：对命中的文件进行规则应用。配置项有loader，options，use，parser等；
执行顺序：可以通过enforce项来改变默认执行顺序。一组loader是从右向左执行的，enforce可以将某一loader提至最前或最后执行。

详细配置查看

① 加载css文件

加载css文件需要style-loader和css-loader两个loader，首先安装loader：

npm install --save-dev style-loader css-loader

这两个loader一般放在一起使用，css-loader会解释@import和 url()，也就是说，用来加载.css文件。style-loader将css-loader返回的css样式插入html页面的<head>标签中。
修改项目结构：

webpack-test
  |-package.json
  |-webpack.config.js
  |-dist        // 构建后（产生的代码最小化以及优化）输出的分发代码
    |-bundle.js
    |-index.html
  |-src         // 用于书写和编辑的源代码
  + |-style.css
    |-index.js

style.css文件：

.test {
  font-size: 20px;
  color: red;
}

将其导入到index.js中:

// 通过显示声明依赖，webpack通过这些信息来构建依赖图
// 然后使用图去生成一个优化过的，按照正确顺序执行的bundle
  import $ from 'jquery';
+ import './style.css';

  function createComponent() {
    var ele = document.createElement('div');
      ele.innerHTML = 'hello webpack';
    + ele.className = 'test';
    // 此处依赖于jquery
    $('#root').append(ele);
  }

  createComponent();

webpack.config.js增加module字段配置：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: { 
    filename: 'bundle.js',  // 输出文件名
    path: path.resolve(__dirname, 'dist')  // 输出到dist目录下
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']   // 从右向左执行
    }]
  }
}

然后运行npm run build，等到打包成功后，刷新index.html，就会在浏览器中看到hello webpack。

② 加载图片文件

file-loader可以处理被加载的资源，将其发送到输出目录（默认），并返回相对url。
安装file-loader：

npm install --save-dev file-loader

添加图片文件到src目录：

webpack-test
  |-package.json
  |-webpack.config.js
  |-dist        // 构建后（产生的代码最小化以及优化）输出的分发代码
    |-bundle.js
    |-index.html
  |-src         // 用于书写和编辑的源代码
    |-style.css
    |-index.js
  + |-pic.jpg

修改style.css，添加背景样式：

.test {
  font-size: 20px;
  color: red;
  background: url(./p1.jpg) no-repeat;
}

最后，修改webpack.config.js：

{
  ...
    module: {
      rules: [{
        test: /\.css$/,
        use: ['style-loader'. 'css-loader']
      }, {
        test: /\.(jpg|png|svg|gif)$/,
        loader: 'file-loader',
        options: {  // 在loader里配置会是一样的效果，如loader: 'file-loader?name=[hash].[ext]',
          name: '[hash].[ext]'
        }
      }]
    }
  ...
}

然后运行npm run build，构建成功后打开index.html就会发现hello webpack字样后面多出了背景图。打开控制台观察样式，就会发现图片名称已经变成由hash值构成的名称，而且路径指向了dist目录（默认输出目录）。输出目录可以更改：详细配置查看

如果是在js里直接导入图片资源，如：import pic from './p1.jpg'。pic便是指向处理之后的图片。

字体文件跟图片文件一样处理。