webpack，loader，babel以及webpack与babel-loader的关系

我们新建一个项目，会先配置webpack，然后配置babel
babel是一个编译工具，实际上，babel也是可以单独使用的

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器。（项目打包）

loader（webpack核心之一）

loader是打包方案，webpack不能识别非js结尾的模块，告知webpack某些特定文件如何打包。官网有loader，开源上也有很多优秀的loader可以使用

babel

babel 是一个 JavaScript 转码编译器。（把（低版本）浏览器不认识的语法，编译成浏览器认识的语法。）

babel-loader（loader之一）

用来连接webpack使用babel的加载器

三者的关系

webpack配合babel使用

(webpack主要是打包工具，不能将ES6写法转为其他兼容的浏览器编译的ECMAscript，如新增的API，webpack本身是能处理简单的js文件的，真正将ES6转码的还是babel，所以还是需要安装babel的）

• babel 是编译工具，把js高级语言转换成浏览器能识别的js语言。
• webpack 是打包工具，定义入口文件，将所有模块引入整理后，通过 loader 和 plugin 处理后，打包输出。
• loader让webpack也能够去处理那些非js文件的模块（如ES6新增的API，webpack本身是能处理简单的js文件）
• webpack 通过 babel-loader 使用 babel 。

使用：

1.什么是 loader
webpack 能处理js/css/图片
loader 让 webpack 能够去处理那些非 JS 文件的模块
babel
2.babel-loader
npm install --save-dev babel-loader@8.1.0
3.安装 Babel
npm install --save-dev @babel/core@7.11.0 @babel/preset-env@7.11.0
4.配置 babel-loader
https://www.webpackjs.com/loaders/
5.引入 core-js 编译新增 API
npm install --save-dev core-js@3.6.5 import “core-js/stable”;
6.打包并测试
npm run webpack

原文链接：https://blog.csdn.net/weixin_44389562/article/details/110449909