webpack生产环境-js兼容性处理babel的使用

墨蓝 2023-07-18 06:55 3阅读 0赞

js兼容性处理babel的使用  
1，创建文件  
![在这里插入图片描述][20200325095624728.png]  
2，下载安装包

> npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js

3，修改配置文件webpack.config.js

const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: {
        rules: [
          /*
            js兼容性处理：babel-loader @babel/core 
              1. 基本js兼容性处理 --> @babel/preset-env
                问题：只能转换基本语法，如promise高级语法不能转换
              2. 全部js兼容性处理 --> @babel/polyfill  
                问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
              3. 需要做兼容性处理的就做：按需加载  --> core-js
          */  
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              // 预设：指示babel做怎么样的兼容性处理
              presets: [
                [
                  '@babel/preset-env',
                  {
                    // 按需加载
                    useBuiltIns: 'usage',
                    // 指定core-js版本
                    corejs: {
                      version: 3
                    },
                    // 指定兼容性做到哪个版本浏览器
                    targets: {
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ]
            }
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html'
        })
      ],
      mode: 'development'
    };

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20200325100013892.png]  
4,运行指令：webpack

[20200325095624728.png]: /images/20230528/6c05060cc78a4e2ea8663e593d11b91f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20230528/67ee1f19790c40c2a6b6dc217b2b5939.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/9e27112462b4448b8d84db9ea6eefc27.png
[20200325100013892.png]: /images/20230528/fcafcb28d9b0429698e46083c00d2553.png