webpack4从0开始构建前端单页项目(4)用babel-loader处理js㈠配置

Babel 是 JavaScript 编译器，用来将 ES6/ES7/ES8...等版本的代码转换成 ES3/ES5 等低版本浏览器支持的 js 语法。babel-loader 就是用来在 webpack 中处理 JavaScript 的编译器。

安装 babel-loader

    cnpm install  babel-loader @babel/core @babel/preset-env -D

项目结构

    project
    |   .editorconfig       # 配置格式化插件
    |   package.json        # 项目需要的依赖
    |   webpack.config.js   # webpack配置文件
    |
    +---public
    |       index.html      # 用于打包生成 .html 文件的模板
    |
    ---src
            main.js         # webpack的入口文件

依赖的模块(package.json)

    "devDependencies": {
        "@babel/core": "^7.11.6",
        "@babel/preset-env": "^7.11.5",
        "babel-loader": "^8.1.0",
        "html-webpack-plugin": "^4.5.0",
        "webpack": "^4.44.2",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
    }

webpack 配置文件

// webpack.config.js
    const webpack = require("webpack");
    const path = require("path");
    const htmlWebpackPlugin = require("html-webpack-plugin");

    module.exports = {
        entry: "./src/main.js",
        mode: "development",
        output: {
            path: path.join(__dirname, "dist"),
            filename: "app.[hash:16].js",
        },
        plugins: [
            new htmlWebpackPlugin({
                filename: "index.html",
                template: "./public/index.html",
                minify: {
                    collapseWhitespace: false,
                },
                inject: true,
            }),
        ],
        devServer: {
            contentBase: path.join(__dirname, "dist"),
            compress: true,
            port: 9000, // 配置端口
            hot: true,
        },

        module: {
            rules: [
                {
                    test: /.js$/,
                    exclude: /(node_modules|bower_components)/, // 忽略node_modules和bower_components目录下的js的文件
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                [
                                    "@babel/preset-env" /*
                    Presets是储存JavaScript不同标准的插件，
                    通过使用正确的presets，告诉babel按照哪个presets编译JS。(相对于babel的插件)
                    常见presets： @babel/preset-env(官方提供默认的presets)、@babel/preset-stage、@babel/preset-react、@babel/preset-typescript */,
                                    {
                                        targets: {
                                            // 根据 webpack 打包后运行环境目标(target)的自定义配置
                                            browsers: [">1%"], // 表示市场占有率大于1%的浏览器。
                                            // "browsers": [">1%", "last 3 version"], // 最近三个版本
                                            /**
                                             * Target可以：
                                             *  以某个 browsers 的版本为目标(大多数情况下使用)
                                             *  以 node 的版本为目标
                                             *  以 特定的浏览器为目标
                                             */
                                            // node: "10", // 以node10的版本为构建目录
                                            // chrome:"70" // 以chrome70的版本为构建目录
                                        },
                                        /**
                                                "targets": {
                                                    "chrome": "58",
                                                    "ie": "11",
                                                    "not ie <= 9"
                                                }
                                            */
                                    },
                                ],
                            ],
                        },
                    },
                },
            ],
        },
    };

webpack4 配置 babel 参考: https://www.webpackjs.com/loaders/babel-loader/

webpack5 配置 babel 参考: https://webpack.docschina.org/loaders/babel-loader/

babel 文档 : https://babel.docschina.org/

babel-loader 文档 参考: https://github.com/babel/babel-loader

preset/target 参考: https://babel.docschina.org/docs/en/babel-preset-env