webpack学习---生产模式--js兼容性处理

需要npm下载 babel-loader @babel/core @babel/preset-env core-js 或者 @babel/polyfill

 

                        js兼容性处理：babel-loader @babel/core

                        1. 基本js兼容性处理 --> @babel/preset-env

                            问题：只能转换基本语法，如promise高级语法不能转换

                        2. 全部js兼容性处理 --> @babel/polyfill  -->这个下载后不用在webpack.config.js中引入,只需要在需要转换的js文件中import引入就好

                            问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~

                        3. 需要做兼容性处理的就做：按需加载  --> core-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: [
                    //兼容性处理
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        loader: 'babel-loader',
                        options: {
                        // 预设：指示babel做怎么样的兼容性处理
                        presets: [
                            [
                            //第一种方式 基本js语法处理
                            '@babel/preset-env',
                            // 第三种家在方式  --- core-js
                            {
                                // 按需加载
                                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'
                };