对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这告诉 webpack 编译器(compiler) 如下信息：
    重要的是要记住，在 webpack 配置中定义 rules 时，要定义在 module.rules 而不是 rules 中。为了使你便于理解，如果没有按照正确方式去做，webpack 会给出警告。

    请记住，使用正则表达式匹配文件时，你不要为它添加引号。也就是说，/\.txt$/ 与 '/\.txt$/' 或 "/\.txt$/" 不一样。前者指示 webpack 匹配任何以 .txt 结尾的文件，后者指示 webpack 匹配具有绝对路径 ‘.txt’ 的单个文件; 这可能不符合你的意图

    {//scss
    test: /.(s[ac]ss|css)$/i,
    use: [
    // 将 JS 字符串生成为 style 节点
    MiniCssExtractPlugin.loader,// “style-loader” //没抽离css文件夹前是style
    // 将 CSS 转化成 CommonJS 模块
    “css-loader”,
    // 将 Sass 编译成 CSS
    “sass-loader”,
    ],
    },
    {//解析js
    test: /.m?js$/,
    use: {
    loader: ‘babel-loader’,
    options: {
    presets: [‘@babel/preset-env’]
    }
    }
    },
    {//vue
    test: /.vue$/,
    use: {
    loader: ‘vue-loader’,
    }
    },
    {//img
    test: /.(png|jpg|gif)$/i,
    use: [
    {//处理图片格式
    loader: ‘url-loader’,
    options: {
    limit: 8192,//超过规定的大小自动到file解析
    fallback: ‘file-loader’,
    },
    },
    ],
    },
    {//icon
    test: /.(svg|weff|weff2)$/i,
    use: [
    {//处理图片格式
    loader: ‘url-loader’,
    },
    ],
    },
    {//html
    test: /.html$/i,
    use: [
    {
    loader: ‘html-loader’,
    },
    ],
    },
    基础配置如需以上配置更深层次的查看loader