Babel

作用

解决兼容性问题
将ES6代码转化成ES6之前的代码

局限性

只能编译ES6新增的语法，例如let、const、箭头函数、class
不编译E6新增的API，例如Set、Map、方法、Promise等全局对象；以及定义在全局对象上的方法，例如Object.assign、Array.from；
需借助其他模块，一般配合Webpack来编译模块语法

浏览器负责编译&执行，效率低
优先使用编译工具提前编译

Node.js是平台或工具

浏览器是前端平台，使用JavaScript开发
Node.js使用后端的JavaScript开发，后端的JavaScript=ECMAScript+IO+FILE+…等服务器端的操作
IO：输入输出操作
FILE：文件性能操作

NPM- Node Package Manager

node.js打包管理工具

初始化-npm init 生成package.json文件

package.json可记录安装的包；若更换了环境，输入npm install即可全部安装
“scripts”: {
“build”: “babel src -d lib”
}

安装包

npm install --save-dev @babel/core@7.11.0 @babel/cli@7.10.5（为更稳定，指定旧版本）
npm install @babel/preset-env@7.11.0 --save-dev(为更稳定指定旧版本)
“@babel/cli”: “^7.10.5”-允许命令行中执行bable命令
“@babel/core”: “^7.11.0”-核心包：发号施令
“@babel/preset-env”: “^7.11.0”-具体语法如何转（即转为ES的哪个版本）

配置-.babelrc

{
“presets”: ["@babel/preset-env"]
}

编译-npm run build

Webpack静态模块打包器

为何学？框架里提供最基础的包不能满足项目个性化需要
当webpack处理应用程序时，会将所有模块(不同于Babel的模块)打包成一个或多个文件
例：
import&export整合导出导入的文件
require整合需要的文件

作用-处理静态内容

静态：开发过程中，存放于本地的JS/CSS/图片/图标字体等文件

入口

单入口

 entry: "./src/index.js",

多入口

entry: {main: "./src/index.js",search: "./src/search.js",},

出口

1）单出口
resolve()完成绝对路径与输出文件名的路径拼接
其中
一参数__dirname：当前文件的绝对路径
二参数：输出内容的文件名

  output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js",}

2）多出口
动态文件名

 output: {path: path.resolve(__dirname, "dist"),filename: "[name].js",},

loader-处理非JS文件的模块

CSS、图片、图标字体等

babel-loader- 转译 JavaScript 文件

使用 Babel 和 webpack

{test: /\.js$/,exclude: /node_modules/,loader: "babel-loader",
},

css-loader-处理 @import 和 url()

就像 js 解析 import/require() 一样

style-loader-把 CSS 插入到 DOM 中

CSS插入 DOM方式1：style-loader以style标签方式

{test: /\.css/,// 单引入// loader: "css-loader",// 多引入use: ["style-loader", "css-loader"], //从右向左执行
},

CSS插入 DOM方式2：mini-css-extract-plugin以link链接方式

{test: /\.css/,use: [MiniCssExtractPlugin.loader, "css-loader"],
},

html-withimg-loader-打包HTML图片

解决问题：
html使用img标签src加载图片，因无依赖不会打包图片

{test: /\.(htm|html)$/i,loader: 'html-withimg-loader'
}

file-loader-打包图片

注：字体属小图片
帮webpack打包处理一系列的图片；
比如：.png 、 .jpg 、.jepg等格式

{test: /\.(jpg|png|gif)$/,use: {loader: "file-loader",options: {name: "images/[name].[ext]",// 和html-withimg-loader冲突// 故需设置不按ES6模块导出// 按ES6返回对象，不按ES6返回地址esModule: false,},},
},

url-loader-设限打包图片

注：字体属小图片
设置图片大小限制
当超限，其等同于file-loader
而当不超限,则以base64形式打包图片进css，以减少请求次数

{test: /\.(jpe?g|png|gif|svg)$/,use: {loader: "url-loader",options: {name: "images/[name].[ext]",// 单位：B// 若图片小于10k，转为base64格式// 若图片大于10k，用file-loader处理limit: 10000,esModule:false},},
},

art-template-loader-模板

编译html文件输出到本地

{test: /\.art$/,loader: "art-template-loader",},

plugins-执行更广范围的任务

mini-css-extract-plugin-把 CSS 插入到 DOM 中

style-loader以style标签方式将CSS添加到html中，但CSS文件过多会显得混乱
mini-css-extract-plugin以link链接方式将CSS添加到html中