Babel和Webpack

Babel

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

Babel编译的结果
- Babel 本身可以编译 ES6 的大部分语法，比如 let、const、箭头函数、类
- 但是对于 ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign/Array.from）都不能直接编译，需要借助其它的模块
- Babel 一般需要配合 Webpack 来编译模块语法
使用Babel的准备工作
- 安装node环境
- 检测是否安装成功 node -v 和 npm -v
- 初始化项目 npm init
- 安装babel需要的包 npm install --save-dev @babel/core @babel/cli 和 npm install --save-dev @babel/core@7.11.0 @babel/cli@7.10.5
使用Babel编辑的操作步骤
- 在 package.json 文件中添加执行编译的命令
```
"scripts": {
  "build": "babel src -d dist"
},
```
- 安装转换的插件 npm install @babel/preset-env@7.11.0 --save-dev
- Babel 的配置文件 .babelrc
```
//  创建配置文件 .babelrc，并配置
 {
    "presets": ["@babel/preset-env"]
  }
```

执行编译命令 npm run dev

Webpack

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

webpack初体验操作步骤

初始化项目 npm init
安装 webpack 需要的包
npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1
配置 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'
  }
};

修改package.json文件

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

编译并测试 npm run webapck

entry 和 output 指定出入口文件

可以指定单入口，也可以指定多入口
同样的可以指定单出口，也可以指定多出口

// 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 文件的模块

以babel-loader为例
1）安装babel-loader npm install --save-dev babel-loader@8.1.0
2）安装 Babel npm install --save-dev @babel/core@7.11.0 @babel/preset-env@7.11.0
3）创建Babel 的配置文件 .babelrc
```
//  创建配置文件 .babelrc，并配置
 {
    "presets": ["@babel/preset-env"]
  }
```

4）引入 core-js 编译新增 API npm install --save-dev core-js@3.6.5

// 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插件为例

作用
- 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
- 为html文件中引入的外部资源，如：script、link

操作步骤

安装插件 npm install --save-dev html-webpack-plugin@4.3.0
配置

  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']
})
]
};