webpack-js的兼容性处理和语法检查

**

js的语法检查

**

进行js语法的检查我们需要 eslint-loader 和 eslint
注意我们只检查的是自己写的源代码，不检查第三方库(如果进行了检查会出现错误)
我们还需要设置检查的规则，在package.json文件中eslinkConfig中进行设置
在设置规则是我们需要airbnb规则，为了使用airbnb这个规则我们需要下载

eslint-config-airbnb-base  和eslint-plugin-import
{
    test: /\.js$/,  //对js文件进行检查
    exclude: /node_modules/,    //去除第三方库
    enforce: 'pre',  //我们需要优先执行eslint-loader  这个是优先执行
    loader: 'eslint-loader',
    options: {
        fix: true          //自动进行修复
    }
}

在package.json文件中eslinkConfig中进行设置

"eslinkConfig": {
    "extends": "airbnb-base"
}

**

js的兼容性处理

**
js兼容性处理： babel-loader，@babel/core
需要进行下载 babel-loader，@babel/core
1、基本兼容性处理:
需要下载：@babel/preset-env
进行loader配置：

{
    test: './js/index.js',
    exclude: /node-modules/,
    loader: 'babel-loader',
    options: {
        //预设：指示babel做怎样的处理
        presets: [@babel/preset-env]
    }
}

问题：只可以转化js基本语法

2、全部兼容性处理：
我们需要一个库 @babel-polyfill
下载：
npm i @babel-polyfill -D
下载的是一个模块直接在js文件中进行引入

3、需要兼容就进行处理：
需要的库为：core-js
下载：

{   
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options:{
                    presets:[
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns:'usage',
                                corejs:{
                                //core-js的版本
                                    version:3
                                },
                                //需要兼容的浏览器
                                targets:{
                                    chrome:'60',
                                    firefox:'60',
                                    ie:'9',
                                    safari:'10',
                                    edge:'17'
                                }
                            }
                        ]
                    ]，
                    cacheDirectory:true   //开启babel缓存   可加可不加
                }
                
                
            }

js代码压缩：
将mode改为生产模式，就会自动进行压缩

html压缩：
在HtmlWebpackPlugin添加属性minify

 plugins:[
    new HtmlWebpackPlugin({template: './src/index.html'，
    minify: {
        //移除空格
        collapseWhitespace:true,
        //移除注释
        removeComments: true
    }
    })