Babel

Babel 是 JavaScript 的编译器，用来将 ES6 的代码，转换成 ES6 之前的代码官网：https://babeljs.io/

Babel编译的结果

(1)Babel 本身可以编译 ES6 的大部分语法，比如 let、const、箭头函数、类
(2)对于 ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign/Array.from）都不能直接编译，需要借助其它的模块
(3)Babel 一般需要配合 Webpack 来编译模块语法

使用Babel的准备工作

(1)安装node环境
(2)检测是否安装成功 node -v 和 npm -v
(3)初始化项目 npm init
(4)安装babel需要的包 npm install --save-dev @babel/core @babel/cli 和 npm install --save-dev @babel/[email protected] @babel/[email protected]

使用Babel编辑的操作步骤

1、在 package.json 文件中添加执行编译的命令

"scripts": {
  "build": "babel src -d dist"
},

2、安装转换的插件 npm install @babel/[email protected] --save-dev
3、Babel 的配置文件 .babelrc
4、执行编译命令 npm run dev

Webpack

了解Webpack

(1)webpack 是静态模块打包器，当 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件
(2)webpack 可以处理 js/css/图片、图标字体等单位
(3)动态的内容，webpack没办法处理，只能处理静态的(开发过程中存在于本地的 js/css/图片/图标字体等文件)

webpack初体验操作步骤

(1)初始化项目 npm init
(2)安装 webpack 需要的包
npm install --save-dev [email protected] [email protected]
(3)配置 webpack，需要创建webpack.config.js文件

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js'
  }
};

(4)修改package.json文件

"scripts": {
  "webpack": "webpack --config webpack.config.js"
},

编译并测试 npm run webapck

entry 和 output 指定出入口文件

(1)可以指定单入口，也可以指定多入口
(2)同样的可以指定单出口，也可以指定多出口

// webpack.config.js 文件配置示例
const path = require('path');

module.exports = {
  mode: 'development',
  // entry: './src/index.js',
  // entry: {
  //   main: './src/index.js',
  //   search: './src/search.js'
  // },
  // output: {
  //   path: path.resolve(__dirname, 'dist'),
  //   filename: 'bundle.js'
  // }
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
};

loader

loader 让 webpack 能够去处理那些非 JS 文件的模块
(1)以babel-loader为例
1）安装babel-loader npm install --save-dev [email protected]
2）安装 Babel npm install --save-dev @babel/[email protected] @babel/[email protected]
3）创建Babel 的配置文件 .babelrc

//  创建配置文件 .babelrc，并配置
 {
    "presets": ["@babel/preset-env"]
  }

4）引入 core-js 编译新增 API npm install --save-dev [email protected]

// js文件中引入
import 'core-js/stable';

5）配置webpack.config.js文件

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }

6）打包并测试 npm run webpack

plugins

** 插件, loader 被用于帮助 webpack 处理各种模块，而插件则可以用于执行范围更广的任务

以html-webpack-plugin插件为例

1、作用
（1）可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
（2）为html文件中引入的外部资源，如：script、link
2、操作步骤
（1）安装插件 npm install --save-dev [email protected]
（2）配置

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
// entry: {
//   index: './src/index.js'
// },
entry: {
index: './src/index.js',
search: './src/search.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
plugins: [
// 单入口
// new HtmlWebpackPlugin({
//   template: './index.html'
// })

// 多入口
new HtmlWebpackPlugin({
  template: './index.html',
  filename: 'index.html',
  chunks: ['index'],
  minify: {
    // 删除 index.html 中的注释
    removeComments: true,
    // 删除 index.html 中的空格
    collapseWhitespace: true,
    // 删除各种 html 标签属性值的双引号
    removeAttributeQuotes: true
  }
}),
new HtmlWebpackPlugin({
  template: './search.html',
  filename: 'search.html',
  chunks: ['search']
})
]
};

Webpack和Babel