效果
    一个vue单页组件，将html、css、js拆分成多个文件，方便维护和管理，如下图所示：
    image.png
    我们知道，如果是按照这样存放文件，webpack是无法帮我们将多个文件组装成一个.vue文件的，所以我们使用loader来先进行组装

    webpack loader

    https://www.webpackjs.com/contribute/writing-a-loader/

    webpack的loader作用很大，用处也很多，就比如我们的sass，正常浏览器是不认识这种样式的，所以需要我们在打包之前，使用loader将我们的sass转换成正常的css
    所以我们想要对多个文件进行拼接，则我可以自己写一个loader，提前帮我们把文件组装起来再给webpack进行打包

    loader配置
    拿vue项目来说，我们需要在vue,config.js中进行loader配置，下面代码意思是，rule进行匹配，如果遇到js、jsx、vue、scss文件，会使用
    ./src/test/fileLoader.js这个loader进行处理（调用本地的loader方式）

    1. // vue.config.js
    2. chainWebpack: config => {
    3.     config.module
    4.           .rule('jsone')
    5.             .test(/\.m?jsx?$/)
    6.             .pre()
    7.             .include
    8.             .add(resolve(__dirname,'./src/test'))
    9.             .end()
    10.               .use(require.resolve('./src/utest/fileLoader.js'))
    11.               .loader(require.resolve('./src/test/fileLoader.js'))
    12.               .end()
    13.             .end()
    14.               .rule('vueone')
    15.               .test(/\.vue$/)
    16.               .pre()
    17.               .include
    18.               .add(resolve(__dirname,'./src/test'))
    19.               .end()
    20.                 .use(require.resolve('./src/test/fileLoader.js'))
    21.                 .loader(require.resolve('./src/test/fileLoader.js'))
    22.                 .end()
    23.               .end()
    24.                 .rule('scssone')
    25.                 .test(/\.scss$/)
    26.                 .pre()
    27.                 .include
    28.                 .add(resolve(__dirname,'./src/test'))
    29.                 .end()
    30.                   .use(require.resolve('./src/test/fileLoader.js'))
    31.                   .loader(require.resolve('./src/test/fileLoader.js'))
    32.                   .end()
    33. }

    loader支持链式调用，所以如上所写没问题

    后面需要用到的loader的api
    addDependency
    加入一个文件，作为结果的依赖，使它们的任何变化都可以被监听到（当监听的依赖内容发生变化的时候，就会重新编译）