Babel&Webpack

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中

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-webpack-plugin

webpack-dev-server-搭建开发环境

开发阶段无需生成dist文件夹
自动化:一次运行npm run dev，修改文件内容后自动再次运行

生产&上线

上线时，dist文件夹传入服务器
复制图片：原图片复制一份放入dist中
改路径：原图片地址改为新图片地址