常用的loader方法及作用

noParse: /node_modules/(moment|chart.js)/, //不解析
多个loader配合使用时，处理顺序是：从下到上，从右到左 的顺序；

处理css
css-loader 读取.css文件内容 帮我们分析出各个css文件之间的关系，把各个css文件合并成一段css 并实现一些功能 比如模块化 压缩 生成map文件等
style-loader 将css-loader生成的css代码挂载到页面的header部分

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

处理.png 、 .jpg 等图片文件
file-loader 打包处理一系列的图片文件 会给每张图片都生成一个随机的hash值作为图片的名字

{
    test: /\.jpg$/,
    use: [ 'file-loader' ]
}

处理.png 、 .jpg 等图片文件
url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
        }
    ]
}

转译js 「解析 - 转换 - 生成」三个步骤 互为依赖关系
babel-loader 转译 JavaScript 代码
@babel/core 解析
具体的「转换」和「生成」步骤则交给各种插件（plugin）和预设（preset）来完成。
preset一般单列为.babelrc配置文件
@babel/preset-* 实际上就是各种插件的打包组合，也就是说各种转译规则的统一设定，目的是告诉loader要以什么规则来转化成对应的js版本

    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: [require('@babel/plugin-transform-object-rest-spread')]
        }
      }
    }

处理html文件
html-loader 将HMTL模板文件当做一个string输出。

        {
          test: /\.(html)$/,
          use: {

            loader: 'html-loader',
            options: {
              attrs: [':data-src'], //为了做图片懒加载，那些属性需要被，制定什么属性被该loader解析
              minimize: false,
            },
          },
        },