🤓😍Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主
🐱🐉若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍*
🐞🐞文章若有错误或某个内容有更优的解决方案，还望指正！👍*
更多webpack入门知识，详细解读webpack的基本使用、进阶优化等；请阅读专栏：sam9029–CSDN博客—Webpack入门笔记
或者访问 作者个人博客网站：sam9029.asia—Webpack入门笔记
Babel
官方文档 https://www.webpackjs.com/loaders/babel-loader#root
JavaScript 编译器。
主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
安装
npm i babel-loader @babel/core @babel/preset-env -D
- babel-loader：用于在 webpack 构建过程中将 JavaScript 文件从 ES6+转换为 ES5，以便在旧版浏览器中运行。
- @babel/core：这是 Babel 编译器的核心包，提供转译 JavaScript 代码的功能。
- @babel/preset-env：这是 Babel 的一个预设，用于将 ES6+代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版浏览器中运行。
配置文件
配置文件由很多种写法：
-
babel.config.*：新建文件，位于项目根目录
babel.config.jsbabel.config.json
-
.babelrc.*：新建文件，位于项目根目录
.babelrc.babelrc.js.babelrc.json
-
package.json中babel：不需要创建文件，在原有文件基础上写
Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可
babel.config.js基础配置
// babel.config.js
module.exports = {// 预设presets: ["@babel/preset-env"],
};
webpack.config.js 配置 Babel
- 配置在
loader之中
module.exports = {module: {rules: [{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: "babel-loader",},],},
};
- 完整
webpack.config.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [// ... 其他配置{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: "babel-loader",},],},plugins: [// ... 其他配置],mode: "development",
};
