webpack js兼容性处理

 

目前最新的代码规范很多都不能直接被浏览器识别访问，而借助webpack我们可以使用babel对js进行转换，将其变成浏览器可识别的代码

其中就有个loader：babel-loader 而跟他一起使用的或者有依赖关系的还有其他的 @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators 所以我们需要安装这些包 

cnpm i babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators -D

而在webpack4的使用中不需要其中的两个包@babel/plugin-proposal-class-properties @babel/plugin-proposal-decorator，在配置上也略有不同之处

// js兼容性处理
{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        // webpack4配置
        // 预设：只是babel做怎么样的兼容性处理
        // preset: ['@babel/preset-env']

        // webpack5配置
        presets: [
             '@babel/preset-env'
        ],
        plugins: [
             ["@babel/plugin-proposal-decorators", { "legacy": true }],
             ["@babel/plugin-proposal-class-properties", { "loose": true }]
        ]
     }
 }