我们面对webpack这话固定写法，逻辑性不强的技术，最好还是从使用方式学起，理论基础在有使用经验后学起来更容易理解。

加载器loader使用

这里我们使用webpack完成这样一个开放需求：src文件夹中有多媒体、文本、脚本、样式表、超文本，然后通过一个index.js文件引用其他各种内容,webpack识别这个文件并加载除了js以外所有资源并输出到dist文件夹里，静态网页直接引用。

我们前面发现webpack本身可以对js代码做处理，所以重点是其他类型的加载。

    module: {
        rules: [
            { test: /\.css$/i, use: ['style-loader', 'css-loader'], },
            .......
        ],
    },

test参数是正则表达式，用于匹配import 引入的不同后缀文件。use参数是要使用的loader模块数组。

加载css

我们只将index.js作为入口文件，这就意味着我们css资源需要通过index.js去引用。

//index.js
import './test.css'

这显然不符合我们以前开放的常识，执行webpack后报错提示，webpack不能识别test.css文件的第一行。

这里我们使用style-loader和css-loader加载器就可以让index.js可以引入css样式，而html引入出口文件（mian.js）后就自动引入了css样式内容。

{ test: /\.css$/i, use: ['style-loader', 'css-loader'], },

加载图片我们使用file-loader，引入得到的是图片的编码，可以直接赋值给img标签的src属性。

//index.js
import img from'./peak-result.png'
document.querySelector('img').src=img

{ test: /\.(jpg|png|gif)$/i, use: ['file-loader'], },

webpack打包后你会发现在dist中会出现图片的哈希命名拷贝文件。

加载视频和音频我们使用url-loader，同样可以赋值给对应多媒体标签的src属性。

//index.js
import url from './14849.mp3'
document.querySelector('#url').src=url

{
  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  use: ['url-loader'],
},

test参数中匹配的文件后缀一定要避免重复，容易冲突。

通过上面我们发现，模块化的开发，不只是js之间的互相引用，通过webpack（loader）我们可以实现任何的文件进行引入打包。

而实现任何文件的都能引入，需要我们找到能够处理该文件的loader模块，并识别文件后缀。并且可以写入额外的配置信息（option）。

除了上面的loader，我们通过npm可以下载的loader是无穷无尽，我们只需要记住常用的loader，其他特殊的情况则按需到网上查询。