简单了解 webpack 和 babel 做了什么
2020-07-14 05:49
603 查看
webpack
- webpack自身:只打包js文件
- webpack的loader和plugin:
- babel-loader:解析es6为js
- css-loader:解析css文件
- style-loader:将解析后的css放到style标签中放到js中
- file-loader:解析图片和字体;/.(png|jpg|svg|gif)$/,/.(woff|woff2|ttf|otf|eot)$/
- extract-text-webpack-plugin:将css从js中拆分出来,单独打包为css文件
- html-webpack-plugin:以某个用户自定义的html为模板,自动生成html;并把打包后的js、css、img等引入该生成后的html
babel
Babel 是一个 JavaScript 编译器
- @babel/cli:命令行转码工具
- @babel/preset-env:转码规则
- @babel/core:转换JavaScript句法(syntax),一部分API
- @babel/polyfill:转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)。
- babel-loader:webpack解析babel的loader
相关文章推荐
- 详解webpack 配合babel 将es6转成es5 超简单实例
- 从一个简单的WEB项目入手来简单地了解一下什么是Spring之持久层(Dao)
- FE - 走向Node与Webpack 之路 - ECMAScript 6.0 简单学习babel
- webpack.config.js 参数简单了解
- web应用,我们需要了解什么?
- webpack打包出错,通过babel将es6转es5的出错。
- 1、最简单的webpack实例
- 走近webpack(5)--devtool及babel的使用
- 使用 Webpack 与 Babel 配置 ES6 开发环境
- 前端自动化构建工具webpack简单入门——2
- 浅入webpack4 高效简单的配置
- webpack打包简单案例
- 基于webpack实现多html页面开发框架五 开发环境配置 babel配置
- webpack入门之简单例子跑起来
- Babel —— Webpack及Gulp的配合使用
- vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(五)
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
- 简单易懂的webpack入门
- webpack初步了解
- 超简单使用vue-cli+webpack脚手架来构建vue项目