webpack使用babel，tree-shaking

• 目录

  
  捕获.JPG

由于浏览器不同厂家的兼容性不一样，一些比较新的语法有些老旧的浏览器不支持，可以使用babel编译使其兼容

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

index.js

import {fly}  from './fun.js'
let arr = [1,2,3]
arr.map((index)=>console.log(index))

打包的文件如果在ie运行 是不可以运行的，但是可以在chrome运行

创建.babelrc

{
    "presets": [["@babel/preset-env",{
        "targets":{
            "browsers": [
                "> 1%",
                "last 2 versions",
                "not ie <= 8"
              ]
        },
        "useBuiltIns":"usage"
    }]]
}

webpack.config.js

const path = require('path')
// npm install --save-dev babel-loader @babel/core
//npm install @babel/preset-env --save-devc
module.exports = {
    mode:'development',
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader'
            }
        ]
    },
    optimization:{
        usedExports:true//打开tree shaking 生产环境默认·true package.json sideEffects
    },
    entry:{
        main:'./src/index.js'
    },
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'./dist')
    },
}

• tree-shaking
• 当引入一个模块时，有一些函数不使用，也会打包到文件里面去，使用tree-shaking可以避免