Babel和Webpack

01 课程简介

Babel

• Babel 的使用方式
• 使用 Babel 前的准备工作
• 使用 Babel 编译 ES6 代码

Webpack

• Webpack是什么
• Webpack初体验
• 核心概念：entry和output 、loader 、plugins
• 应用：
  • 处理CSS文件
  • 使用 file-loader 处理 CSS 、JS中的图片
  • 使用 html-withimg-loader 处理 HTML 中的图片
  • 使用 url-loader 处理图片
  • 使用 webpack-dev-server 搭建开发环境

02 Bebel

1、认识 Babel

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

在线使用：https://www.babeljs.cn/

编译结果：

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

2、Babel的使用方式

查看最新使用方式地址：https://www.babeljs.cn/setup

1.Node.js和npm

Node.js 是个平台或者工具，对应浏览器

后端的 JavaScript = ECMAScript + IO + File + …等服务器端的操作

npm：node 包管理工具 npm install

2.安装node.js

安装完成之后，node -v

npm -v 测试是否成功

3.初始化项目

控制台进入项目的目录，输入 npm init，输入项目名babel（注意不能为中文），生成package.json，可以查看生成的内容

4.安装Babel需要的包

如果npm不是使用的淘宝源，可以切换，速度会更快：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

3、使用Babel编译ES6代码

1.执行编译命令

在package.json的scripts下添加babel执行的命令："build": "babel src -d dist"

意思是：在babel项目下的src文件夹进行编译，并输出到dist文件（-d：输出，等价于：–out-dir）

在babel项目下创建src，在src下创建babel.js，写入如下代码

let name = 'mys';
const age = 18;
const add = (x, y) => x + y;
new Promise((resolve, reject) => {
  resolve('成功');
});
Array.from([1, 2]);
class Person {}
import './index.js';

执行：npm run build

运行完成之后，项目下出现了dist/babel.js文件，但是其内容与src/babel.js一样，说明没有转换成功，原因是需要配置文件.babelrc

2.Babel 的配置文件 .babelrc

安装命令：npm install @babel/preset-env@7.11.0 --save-dev

执行完成之后，package.json中的devDependencies下出现了："@babel/preset-env": "^7.11.0"

@babel/cli
@babel/core
@babel/preset-env
在项目下创建.babelrc文件，输入：

{
  "presets": ["@babel/preset-env"]
}

删除dist文件夹，重新在控制台执行 npm run build，可以看到dist/babel.js文件已经变化，和babel在线编译的结果一样

03 Webpack

1、认识Webpack

webpack 是静态模块打包器，当 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件

webpack 可以处理 js/css/图片、图标字体等单位

静态：开发过程中存在于本地的 js/css/图片/图标字体等文件，就是静态的

动态的内容，webpack没办法处理，只能处理静态的

2、Webpack初体验

1.初始化项目

npm init

2.安装 webpack 需要的包

npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1

3.配置 webpack

创建：webpack.config.js，进入webpack官网：https://www.webpackjs.com ，查看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'
  }
};
// node.js
// 导入：require；导出：module.exports

在package.json的scripts下配置："webpack": "webpack --config webpack.config.js"

4.编译并测试

npm run webpack

3、Webpack核心概念

1.entry和output

指定入口文件，有单入口文件和多入口文件

// 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' // 自动根据入口的名字来设置出口的名字
}

2.loader

loader

webpack可以处理js/css/图片，但webpack本身不认识这些文件，需要loader帮助

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

用什么就加载哪些模块

babel-loader

安装：npm install --save-dev babel-loader@8.1.0

配置babel：.babelrc

配置webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    }
  ]
}

https://www.webpackjs.com/loaders/

引入 core-js

安装： npm install --save-dev core-js@3.6.5

在index.js中导入： import "core-js/stable";

打包并测试

npm run webpack

3.plugins

插件

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

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

html-webpack-plugin

安装：npm install --save-dev html-webpack-plugin@4.3.0

配置 html-webpack-plugin 插件

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

自动在dist/index.html中添加：<script src="main.js"></script>

4、Webpack应用

1.处理CSS文件
通过loader引入style标签

需要安装：

1.webpack：
npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1
2.html-webpack-plugin:
npm install --save-dev html-webpack-plugin@4.3.0
3.css-loader:
npm install --save-dev css-loader@4.1.1 
4.style-loader:
npm install --save-dev style-loader@1.2.1

配置：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // loader: 'css-loader'
        use: ['style-loader', 'css-loader'] // 顺序：从右往左执行
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    })
  ]
}

通过link

安装：npm install --save-dev mini-css-extract-plugin@0.9.0

配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

new MiniCssExtractPlugin({
      filename:'css/[name].css'
    })

2.使用file-loader处理CSS图片

如果是外部的资源，是不需要考虑 webpack 的，只有本地的图片才需要被 webpack 处理

安装file-loader：npm install --save-dev file-loader@6.0.0

配置：

{
  test: /\.(jpg|png|gif)$/,
  use: 'file-loader'
}

将图片的地址改为打包后的图片地址

但是此时图片的地址是有问题的，需要做如下修改：设置MiniCssExtractPlugin的路径

{
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 设置路径
              publicPath: '../'
            }
          },
          'css-loader'
        ]
      },

或者修改：

      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            // 指定图片的地址
            name: 'img/[name].[ext]'
          }
        }
      }

5-5/6/7

3.使用 html-withimg-loader 处理 HTML 中的图片

安装：npm install --save-dev html-withimg-loader@0.1.16

{
        test: /\.(htm|html)$/,
        loader: 'html-withimg-loader'
      }

4.使用 url-loader 处理图片

npm install --save-dev url-loader@4.1.0

5.搭建环境

安装：npm install --save-dev webpack-dev-server@3.11.0

scripts下增加：“dev”: “webpack-dev-server --open chrome” //自动更新，不用每次打包

执行：npm run dev