Webpack 打包 - 12. JS兼容性处理
这里使用 babel 处理 js 兼容性问题
1.文件结构
2.安装 babel core-js
$ npm i babel@6.23.0 @babel/core@7.8.4 @babel/polyfill@7.8.3 babel-loader@8.0.6 @babel/preset-env -D
$ npm i core-js@3.6.4 -D
3. 代码
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </head> <body> <h5>webpack</h5> </body> </html>
index.js
//第二种方式: 全部js兼容性处理 // import '@babel/polyfill' const add = (x, y)=> { return x + y; } console.log(add(1, 2)); const promise = new Promise((resolve)=>{ setTimeout(()=>{ console.log('定时器执行完毕') resolve() },1000) }) console.log("promise:",promise)
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: [ //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" }
4.打包
$ webpack
end~