解析webpack的配置文件webpack.config.js（一）

    module:{//模块
        rules:[//规则
            {
                test:/\.(js|jsx)$/,
                use:{
                    loader:'babel-loader'
                }//创建.babelrc来辅助
            },
            {
                //test  要匹配的文件类型 支持正则
            test:/\.css$/,
                //use要执行的loader
            use:['style-loader','css-loader']
            },{
                test:/\.(jpe?g|png|gif)/,
                use:{
                    loader:'file-loader'
                }
            },{
                test:/\.(eot|ttf|woff|svg)$/,
                use:{
                    loader:'url-loader',
                    options:{//配置项
                        limit：10240
                    }
                }
            }
        ]
    }

    babel-loader  首先要全局按装babel
        npm i babel-loader @babel/core @babel/preset-env -D
    npm i css-loader style-loader -D  用于解析css的  有顺序之分,先执行css-loader,后执行style-loader
    npm i file-loader -D 用于解析图片的插件
    npm i url-loader -D  字体图标
        url-loader可以限制大小  返回base64格式 
        file-loader不能限制大小
    npm i webpack -D

.babelrc文件
{
    "presets":[
        "@babel/preset-env"//版本七
        //"babel-preset-env"//6
    ]
}
···
* 可参考官网  https://webpack.github.io/