项目目录：

QQ截图20200427160738.png

//webpack.config.js
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: ['./src/index.js'],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            // localsConvention: '[name]--[local]--[hash:base64:5]',
                            sourceMap: true,
                            modules: true                            
                        }
                    }
                ]

            }, 
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [['@babel/preset-env', {//注意这里是一个map结构
                                "modules": false,
                                 "useBuiltIns": "usage",//按需加载转换语法
                                 "corejs": 2//使用useBuiltIns字段必须声明@babel/runtime版本
                            }]],
                             //plugins: ['@babel/plugin-transform-runtime']
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

真正其起作用的就是这么一段：

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [[
                                '@babel/preset-env',//管你是2015还是2015，包含所有的ES版本
                                {
                                    "modules": false,
                                    "useBuiltIns": "usage",//polyfill按需引入
                                    "corejs": 2//使用了useBuiltIns必须指定@babel/runtime版本
                                }
                            ]],
                            // plugins: ['@babel/plugin-transform-runtime']
                        }
                    }
                ]
            }

需要安装的依赖

{
  "name": "my-loader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.5",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

//index.js

const set = new Set()

new Promise((resolve, reject) => {
    console.log(666);
    resolve(123)
})

// console.log(123)

用IE11打开index.html

QQ截图20200427160931.png

从babel7.4开始，一些新的特性开始加入，可以这样使用

//webpack.config.js
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: ['./src/index.js'],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode:"development",
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [[
                                '@babel/preset-env',
                                {
                                    "modules": false,
                                    "useBuiltIns": "usage",
                                    "corejs": 3
                                }
                            ]],
                            plugins: [
                                ['@babel/plugin-transform-runtime', {
                                    "corejs": 3
                                }]
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

依赖包：

{
  "name": "my-loader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.5",
    "@babel/runtime-corejs3": "^7.9.2",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

主要就是使用了@babel/runtime-corejs3,但是发现这种方式打包后的体积增加了不少（难道是新特性引入的？），大家可以根据实际情况选择。

【完】