webpack---js相关配置

一、js语法检查

依赖：eslint、eslint-loader -D
// 配置loader
{
    test: /\.js$/,
    // 一定要排除
    exclude: /node_modules/,
    loader: 'esint-loader',
    options: {
        // 自动修复
        fix: true
    }    
}
// 设置检查规则（两种方式）
1、package.json中eslintConfig项的配置
2、.eslintrc文件

二、js兼容性处理

1、全部js兼容问题都处理（暴力方式,在js文件中直接引入包，体积会很大）
import '@bable/polyfill'

2、按需处理
依赖：babel/core、babel-loader、@babel/preset-env、core-js
babel-loader的工作依赖于babel/core,所以需要下载babel/core
{
    test: /\.js$/,
    exclude: /node_module/,
    loader: 'babel-loader',
    options: {
        preset: [
            // 基本js的兼容处理，处理不了promise等
            '@babel/preset-env',
            {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js包的版本
                corejs: {
                    version: 3
                },
                // 指定兼容到哪个版本的浏览器
                target: {
                    chrome: '60',
                    firefox: '50',
                    ie: '9'
                }
            }
        ]
    }
}

三、js压缩（生产）

js的压缩，只需要设置mode: 'production'