前端基础之《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编译器）：
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
// 两个环境都需要的公共配置// 从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，用的时候需要newplugins: [// 用于把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
// 定义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：
// 定义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-*