前端基础之《React（2）—webpack简介-使用Babel》

接上篇......

十、模块编译

目前是只做了简单的压缩，没有编译处理。对最新es6语法浏览器会报错。

1、使用loaders（配置中叫module）

webpack支持使用loader对文件进行预处理。

在webpack眼中一切文件皆模块，webpack必须使用各种loaders来处理各种不同的模块文件。

常用资源：js模块，css模块，jpg模块，png模块，gif模块，sass模块，less模块，vue模块等等

2、安装软件包

loader是用来加载文件的，所以先要安装js模块（babel编译器）：

bash 复制代码

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

@babel/core是babel的核心包，@babel/preset-env是专门用于编译ES6语法，@babel/preset-typescript用于编译TS语法

3、config.js

javascript 复制代码

// 两个环境都需要的公共配置

// 从node进程中引入path模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin } = require('webpack') // webpack自带插件

module.exports = {
    entry: {
        // 可以给入口文件取个名字，给output使用
        app: path.resolve(__dirname, '../', 'src/main.js'),
    },

    // 出口
    output: {
        // 自定义打包结果的输出目录，默认是dist目录，这里只能使用绝对路径
        path: path.resolve(__dirname, '../', 'dist'),
        // 指定打包结果的JS名称规范
        // filename: 'bundle.js' // 量词，一捆、一束
        filename: 'js/[name].[chunkhash:8].js',
        // 每次build打包时，都自动先删除dist中的旧文件
        clean: true
    },

    // 插件
    // 所有webpack插件都是class，用的时候需要new
    plugins: [
        // 用于把JS脚本和index.html自动注入合并
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../', 'public/index.html'),
            inject: 'body', // 把JS注入到body结束标签前面
            filename: 'index.html', // 指定打包成功后这个模板叫什么名字
            title: '测试'
        }),
        // 添加编译进度条
        new ProgressPlugin({
            handler(percentage, message, ...args) {
                console.log(percentage, message, ...args)
            }
        })
    ],

    // 在webpack眼中一切文件皆模块，webpack必须使用各种loaders来处理各种不同的模块文件
    module: {
        // 定义模块编译的规则和方式
        rules: [
            {
                test: /\.js$/, // 检测模块以js结尾
                use: ['babel-loader'] // 使用babel编译器把ES6+的代码编译成ES5
            }
        ]
    }
}

配置作用：当webpack工作时，遇到以.js结尾的模块时，就是用babel-loader进行加载，加载后交给@babel/*编译器进行编译，得到ES5代码。

4、新建babel.config.js

javascript 复制代码

// 定义babel的工作方式
module.exports = {
    // 预设：用于编译哪些比较大的JS版本，比如ES6、TS、Flow、Vue等
    presets: [
        '@babel/preset-env'
    ],
    // 插件
    plugins: []
}

5、新语法如果环境报错

Support for the experimental syntax 'decorators' isn't currently enabled

说明是有新语法不支持，到https://babeljs.io/docs/plugins-list查下对应模块

安装插件：

cnpm i @babel/plugin-proposal-decorators -D

修改babel.config.js：

javascript 复制代码

// 定义babel的工作方式
module.exports = {
    // 预设：用于编译哪些比较大的JS版本，比如ES6、TS、Flow、Vue等
    presets: [
        '@babel/preset-env'
    ],
    // 插件
    plugins: [
        // 这个插件用于编译装饰器语法
        ["@babel/plugin-proposal-decorators", { "version": "2023-11" }]
    ]
}

6、babel介绍

babel是一个JavaScript编译器，你想用什么新语法，只要安装babel的插件以及预设就可以了。

7、小结

在webpack中，如何处理.js模块？

安装babel-loader，在webpack中配置module.rules

安装@babel/core、@babel/preset-*