zoukankan      html  css  js  c++  java
  • webpack js兼容处理

    webpack在不需要引入任何loader可以对于js进行打包处理,但是它不会对于js兼容性进行任务的处理,而我们编写的项目是需要在不同的浏览器中运行的,此时就需要对于js的兼容性在打包过程中进行对应的处理。使用babel来完成对应的js兼容处理

    # 早期使用 @babel/polyfill 来完成,但是当只要解决部份兼容性问题,它还是将所有兼容性代码全部引入,体积太大,不推荐使用了

    # 推荐使用如下方案,按需加载进行兼容性处理

    npm i -D babel-loader @babel/core @babel/preset-env core-js(3)

    # loader配置
    module: {
      rules: [
        // js兼容处理
        {
          test: /.js$/,
          // 排除
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  // 按需加载  inital  enter uage
                  useBuiltIns: 'usage',
                  // 指定core-js版本
                  corejs: 3,
                  // 兼容性做到哪个版本的浏览器
                  targets: {
                    chrome: '80',
                    firefox: '50',
                    ie: '9',
                    safari: '10',
                    edge: '17'
                  }
                }
              ]
            ]

        }

    
    

        }

    
    

      ]

    
    

    }

     

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    java输出菱型
    java----内部类
    java中的多重继承
    java算法--三个数字比较大小
    Python基础(2)
    Python基础(1)
    Redis主从同步
    一种高效的进程间的通信方式
    自旋锁和互斥锁的区别
    Linux读写锁的使用
  • 原文地址:https://www.cnblogs.com/ht955/p/14446869.html
Copyright © 2011-2022 走看看