webpackjs兼容性处理

index.js

1. 全部js兼容性处理。js内引入babel/polyfill

// 全部js兼容性处理。 &＃64;babel/polyfill
import &＃39;&＃64;babel/polyfill&＃39;;const add &＃61; (x, y) &＃61;> {return x &＃43; y;
}
console.log(add(3, 5));const promise &＃61; new Promise((resolve) &＃61;> {setTimeout(() &＃61;> {console.log(&＃39;定时器执行完了~&＃39;);resolve();}, 1000)
})
console.log(promise);


2. 兼容性处理的&＃xff1a; 按需加载。 core-js&＃xff0c;需要webpack中配置

// import &＃39;&＃64;babel/polyfill&＃39;;const add &＃61; (x, y) &＃61;> {return x &＃43; y;
}
console.log(add(3, 5));const promise &＃61; new Promise((resolve) &＃61;> {setTimeout(() &＃61;> {console.log(&＃39;定时器执行完了~&＃39;);resolve();}, 1000)
})console.log(promise);


webpack.config.js

const {resolve} &＃61; require(&＃39;path&＃39;);
const HtmlWebpackPlugin &＃61; require(&＃39;html-webpack-plugin&＃39;);module.exports &＃61; {entry: &＃39;./src/js/index.js&＃39;,output: {filename: &＃39;js/build.js&＃39;,path: resolve(__dirname, &＃39;build&＃39;)},module: {rules: [/*** js兼容性处理&＃xff1a; babel-loader &＃64;babel/core &＃64;babel/preset-env* 1. 基本js兼容性处理 &＃64;babel/preset-env* 问题&＃xff1a; 只能转换基本语法&＃xff0c;如promise不能转换* 2. 全部js兼容性处理。 &＃64;babel/polyfill* 问题&＃xff1a; 只要解决部分兼容性问题&＃xff0c;但是所有兼容性代码全部引入&＃xff0c;体积太大。* 3. 兼容性处理的&＃xff1a; 按需加载。 core-js*/{test: /\.js$/,exclude: /node_modules/,loader: &＃39;babel-loader&＃39;,options: {// 预设&＃xff1a;指示babel做怎么样的兼容性处理&＃xff0c;普通简单转换处理。// presets: [// &＃39;&＃64;babel/preset-env&＃39;// ]// 按需加载&＃xff0c;上面注释。js中注释 importpresets: [[&＃39;&＃64;babel/preset-env&＃39;,{// 按需加载useBuiltIns: &＃39;usage&＃39;,// 制定 core-js的版本corejs: {version: 3},// 指定兼容性做到哪个版本的浏览器targets: {chrome: &＃39;60&＃39;,firefox: &＃39;60&＃39;,ie: &＃39;9&＃39;,safari: &＃39;10&＃39;,edge: &＃39;17&＃39;}}]]}}]},// 插件plugins: [new HtmlWebpackPlugin({template: "./src/index.html"}),],// 模式 development 开发&＃xff0c; production 生产mode: &＃39;development&＃39;,
}