Babel与WebPack

官网：https://babeljs.io

在线编译：https://babeljs.io/repl

Babel是js的编译器，用来将ES6的代码，转换成ES6之前的代码

Babel一般需要配合Webpack来编译模块语法

使用Babel前的准备工作

<script>
    // 1.什么是 Node.js 和 npm
    // Node.js 是个平台或者工具，对应浏览器
    // 后端的 JavaScript = ECMAScript + IO + File + ...等服务器端的操作

    // npm：node 包管理工具

    // npm install

    // 2.安装 Node.js
    // node -v
    // npm -v

    // 3.初始化项目
    // npm init -> package.json

    // 4.安装 Babel 需要的包
    // npm config set registry https://registry.npm.taobao.org

    // npm install --save-dev @babel/core @babel/cli
    // npm install --save-dev @babel/core@7.11.0 @babel/cli@7.10.5

    // npm install
</script>

使用Babel编译ES6代码

• 编译的命令
• Babel的配置文件

<script>
      // https://babeljs.io/setup

      // 1.执行编译的命令
      // 在 package.json 文件中添加执行 babel 的命令
      // babel src -d dist
      // babel src --out-dir dist

      // npm run build

      // 2.Babel 的配置文件
      // .babelrc

      // npm install @babel/preset-env@7.11.0 --save-dev

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

Webpack定义

<script>
      // 1.认识 Webpack
      // webpack 是静态模块打包器，当 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件

      // import './module.js'
      // require('./module.js')

      // 2.什么是 Webpack
      // 模块
      // webpack 可以处理 js/css/图片、图标字体等单位

      // 静态
      // 开发过程中存在于本地的 js/css/图片/图标字体等文件，就是静态的
      // 动态的内容，webpack没办法处理，只能处理静态的
    </script>

Webpack初体验

• 初始化项目
• 安装webpack需要的包
• 配置webpack
• 打包并测试

html下面 

<script src="./dist/bundle.js"></script>
    <!-- <script src="./src/index.js" type="module"></script> -->
    <script>
      // 1.初始化项目
      // npm init

      // 2.安装 webpack 需要的包
      // npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1

      // 3.配置 webpack
      // webpack.config.js
      // "webpack": "webpack --config webpack.config.js"

      // 4.编译并测试
      // npm run webpack
    </script>

使用模块化有些浏览器解析不了 IE浏览器，所以需要借助webpack包才能解析

export default 18;
console.log('module.js');

import age from './module.js';

console.log('index.js', age);

说明：初始化项目后生成package.json 注意scripts里面是后面需要修改的地方

{
  "name": "webpack2",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "webpack": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

 webpack.config.js在开发阶段一般添加mode属性以便阅读

const path = require('path');

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

编译并测试通过后，生成dist目录下的bundle.js文件 

WebPack的核心概念

entry和output使用

上图是单入口和单出口，这里主要讲多入口和多出口语法[name]

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'
    filename:'[name].js'
  }
};

loader

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

html下面

<script src="./dist/index.js"></script>
    <script>
      // 1.什么是 loader
      // webpack js/css/图片

      // loader 让 webpack 能够去处理那些非 JS 文件的模块

      // babel
      // 2.babel-loader
      // npm install --save-dev babel-loader@8.1.0

      // 3.安装 Babel
      // npm install --save-dev @babel/core@7.11.0 @babel/preset-env@7.11.0

      // 4.配置 babel-loader
      // https://www.webpackjs.com/loaders/官网

      // 5.引入 core-js
      // 编译新增 API
      // npm install --save-dev core-js@3.6.5
      // 在js文件加入import "core-js/stable";

      // 6.打包并测试
      // npm run webpack
    </script>

plugins

loader被用于帮助webpack处理各种模块，而插件则可以用于执行范围更广的任务 插件帮我们解决了不用在手动去添加dist目录下解析出来的文件

这里以多入口为例（操作说明详解）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>plugins</title>
  </head>
  <body>
    <script>
      // 1.什么是 plugins
      // 插件
      // loader 被用于帮助 webpack 处理各种模块，而插件则可以用于执行范围更广的任务

      // https://www.webpackjs.com/plugins/

      // 2.html-webpack-plugin
      // npm install --save-dev html-webpack-plugin@4.3.0

      // 3.配置 html-webpack-plugin 插件

      // 4.多页面时 html-webpack-plugin 插件的配置

      // 5.html-webpack-plugin 插件的其他功能
    </script>
  </body>
</html>

我们这里事先有package.json文件了 开发依赖已经导入3个东西了 所以直接run install即可

{
  "name": "webpack2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

webpack.config.js

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

注意需要书写以template模板拷贝文件到dist目录下生成filename，不写的话默认命名为index.html，引入对应的js源头需要标记chunks 配置完成后，直接输入npm run webpack就可以了