webpack 之 配置js代码兼容

因为es6语法不兼容部分浏览器，所以要对项目进行配置

1.安装依赖

npm install babel-loader @babel/preset-env @babel/core core-js -D //第一三方法安装这个
npm install  @babel/polyfill -D //第二个方法安装这个

2.三种方法兼容

（1）babel-loader @babel/preset-env @babel/core 兼容

       只能兼容基本的语法，但是像是promise语法，无法进行兼容

（2）兼容全部js语法  @babel/polyfill  

　　在index.js中引入依赖即可

　　import '@babel/polyfill'

　　缺点：全部兼容造成打包文件太大

（3）core-js 配合第一种进行按需兼容

3.配置详情（下面是将eslint检查与js兼容配置放在了一起，module中不可以对.js文件(同一种文件)进行多次匹配，多次匹配只会匹配第一个，所以要结合在一起）

{
                test:/.js$/,
                exclude:/node_modules/,
                use:[
　　　　　　　　　　　　　//要优先执行eslint-loader，可使用配置enforce:'pre'　
                    {
                        loader: 'eslint-loader',
                        options:{
                            fix:true//eslint自动修复格式错误
                        }
                    },
                    {//js兼容性处理：babel-loader @babel/preset-env @babel/core
                        loader: 'babel-loader',
                        options:{
                            //预设：指示babel做怎么样的兼容性处理
                            presets:[
                                [
                                    '@babel/preset-env',
                                    {
                                        // 按需加载
                                        useBuiltIns: 'usage',
                                        // 指定core-js版本
                                        corejs: {
                                            version: 3,
                                        },
                                        // 指定兼容浏览器版本范围
                                        targets: {
                                            chrome: '70', // 谷歌版本70及以上
                                            firefox: '62',
                                            ie: '9',
                                            safari: '10',
                                            edge: '17',
                                        }
                                    }
                                ]
                            ]
                        }
                    }
                ]
            },

4.所以一般采用第一种加第三种组合进行.js文件兼容，也就是上面贴的代码。

第二种具体引入方式如下，不建议使用

{
      test:/.js$/,
      exclude:/node_modules/,
      loader:'babel-loader',
      options:{
           presets:['@babel/preset-env']
      }
}