-
目录
捕获.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可以避免
