Babel和Webpack

Babel

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

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

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

   • 安装转换的插件 npm install @babel/[email protected] --save-dev
   • Babel 的配置文件 .babelrc

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

• 执行编译命令 npm run dev

Webpack

1. 了解Webpack
   • webpack 是静态模块打包器，当 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件
   • webpack 可以处理 js/css/图片、图标字体等单位
   • 动态的内容，webpack没办法处理，只能处理静态的(开发过程中存在于本地的 js/css/图片/图标字体等文件)
2. webpack初体验操作步骤
   • 初始化项目 npm init
   • 安装 webpack 需要的包
     npm install --save-dev [email protected] [email protected]
   • 配置 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
3. 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 [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. 作用
   • 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
   • 为html文件中引入的外部资源， 如：script、link
2. 操作步骤
   • 安装插件 npm install --save-dev [email protected]
   • 配置

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