day0527

day0527

昨日回顾

websocket

全双工

即时通信问题

在线客服

---

它也是基于http协议，在第1次时候，把http进行升级 -》 握手

发起websocket请求 -> http

请求头发送过去

版本

key 加密所用

服务器端 — 接受

key + guid => sha1 => base64 =>响应头传给客户端

开发工具webstrom

webpack

1.webpack是什么

支持模块化

tsx
react组件扩展名

从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着高度可配置性，可以很好满足你的需求。
默认配置文件: webpack.config.js 或 webpackfile.js

2.webpack五个核心概念

entry入口

字符串，数组，对象

本项目应该使用哪个模块，来作为构建其内部依赖图的开始（指定打包入口文件）

output输出

对象

在哪里输出它所创建的 bundle，以及如何命名这些文件，默认值为 ./dist

mode模式

字符串

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

loader加载器

对象，里面写数组

loader让webpack能够去处理那些非js文件(webpack自身只理解js)

plugin

数组

插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

3.安装webpack

安装方式2种：

全局安装

npm i -g webpack@4 webpack-cli@3

局部安装(推荐)

webpack是运行在node环境中的，Node >= 8.10 和 npm >= 5.6

npm init -y
npm i -D webpack@4 webpack-cli@3
webpack 打包使用的核心代码
webpack-cli 打包使用时的命令

安装好后可以通过先前提及过的npx命令来检查webpack的版本以确定是否安装成功：

npx webpack --version

在package.json文件中配置webpack运行脚本命令

“scripts”: {
“dev”: “webpack”
},

4.webpack基本使用

在项目根目录下面创建一个webpack.config.js文件，此文件是webpack的默认配置文件名称，后续就可以在此目录下面对webpack进行运行打包配置。

const path = require('path')

module.exports = {
  // 打包模式  development |  production
  mode: 'development',
  // 项目入口
  entry: './src/index.js',
  // entry:{'main': './src/main.js'} // 多入口
  // entry:['./src/index.js', './src/main.js'] // 合并
  // 项目出口
  output: {
	// 路径一定要用绝对路径
path: path.resolve('dist'),
// [name]默认的名称为main
// [hash]随机生成21位字符串
    filename: 'js/[name].js'
  }
}

5.配置访问入口模板文件

在项目根目录下面创建一个public目录，并在此目录中创建一个index.html文件，使用webpack的 html-webpack-plugin插件，可以将此文件用于项目web入口文件模块

# 安装
npm i -D html-webpack-plugin@4
# 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
# 使用 webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    template: path.resolve('public/index.html'),
  })
]

# 删除打包的dist目录
npm i -D clean-webpack-plugin

6.devServer创建

webpack-dev-server自动化打包工具

# 安装 webpack-dev-server
npm i -D webpack-dev-server@3

# 配置 node环境 web环境
devServer: {
    // 运行代码目录
    contentBase: path.resolve('dist'),
// 打包进度
progress: true,
// 端口号
    port: 8080,
    // 域名
    host: 'localhost',
    // 自动打开浏览器
    open: true,
    // 除了一些基本的启动信息以外，其他的内容都不要显示
    quiet: true,
    // 服务器代理 --> 解决开发环境跨域问题
    proxy: {
      // 一旦devServer服务器接受到 /api开头的请求，就会把请求转发到另一个服务器
      '/api': {
        target: 'http://localhost:3000',
        // 发送请求时，请求路径重写: 将/api 去除
        pathRewrite: {
          '^/api': ''
        }
      }
    }
}

# package.json中的scripts中配置命令
"serve": "webpack-dev-server"

7.加载器

加载器概述

loader的调用过程：

打包处理css文件

正如前面所说，webpack默认不能打包css文件，如果在没有安装css加载器的时候打包，包含css文件的项目则会报错：

我们需要安装一个CSS的加载器才能让webpack帮助我们打包css文件。
所以要想打包css文件，则需要安装css加载器，该加载器的安装命令为：

npm i -D style-loader css-loader

安装好需要的加载器后需要对webpack进行配置，告诉webpack当遇到css后缀的文件应该交由哪个加载器去处理。在webpack打包命令对应的module的rules数组中添加css-loader规则：

module: {
rules: [{ test: /.css$/, use: [“style-loader”, “css-loader”] }],
}

在写加载器use的时候，需要注意：

• use数组中指定的加载器顺序是固定的
• 多个加载器调用的顺序是：从右向左、从下往上调用（倒序执行）
  在配置好对应的css加载器后，webpack才能打包对应的css文件

打包处理scss文件

# 安装css预处理loader
npm i -D sass-loader@10 node-sass@5 style-loader css-loader

# loader配置
module: {
  rules: [
    // scss处理
    {
      test: /\.scss$/,
      // 执行顺序   从右到边，从下到上  
      use: [
        "style-loader",
        "css-loader",
        "sass-loader"
      ]
    }
  ]
}

8.配置图片处理

# 安装
npm i -D url-loader file-loader html-loader@1

# loader配置
module: {
  rules: [
    // 图片处理
    {
      test: /\.(png|jpeg|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            // 图片小于8kb，就会被base64处理
            // 优点: 减少请求数量(减轻服务器压力)
            // 缺点：图片体积会更大(文件请求速度更慢)
            limit: 8 * 1024,
			// 打包后的路径和文件名称 [ext]扩展名
            name: 'img/[name].[ext]',
		    // 打包后的文件指定访问路径前缀
            publicPath: '/'
          }
        }
      ]
    },
    {
      test: /\.html$/,
      // 处理html中的img(负责引入img,从而能被url-loader进行处理)
      loader: ['html-loader']
    }
  ]
}

9.处理静态资源

像项目中字体资源是不需要进行打包处理的，可以直接的通过复制方式给打包到目标目录中

# 安装
npm i -D copy-webpack-plugin@6

# 引入
const CopyPlugin = require('copy-webpack-plugin')

# plugins配置
plugins: [
  new CopyPlugin({
    patterns: [
      {
        // 来源
        from: path.resolve('./src/iconfont/'),
        // 目标
        to: path.resolve('./dist/iconfont')
      }
    ]
  })
]

10.js兼容处理

# 按需加载进行兼容性处理
npm i -D babel-loader @babel/core @babel/preset-env core-js
# loader配置
module: {
  rules: [
	  // js兼容处理
      {
        test: /\.js$/,
        // 排除
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    // 按需加载
                    useBuiltIns: 'usage',
                    // 指定core-js版本
                    corejs: 3,
                    // 兼容性做到哪个版本的浏览器
                    targets: {
                      chrome: '50',
                      firefox: '50',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ]
            }
          }
        ]
      }
  ]
}

// ts处理
npm i -D typescript ts-loader@6

{ test: /\.ts$/, loader: "ts-loader" }

11.art-template

npm i -D art-template art-template-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.art$/,
        loader: "art-template-loader"
      }
    ]
  }
}

# 注：对于babel处理js，它有兼容问题，可以选择对于js更高版本处理，或者可以处理

12.externals忽略不打入的包

例如项目中使用从 CDN 引入 jQuery，而不是把它打包进来使用

import $ from 'jquery'

webpack.config.js
externals: {
  jquery: 'jQuery'
}

13.路径与导入后缀省略

  // 解析模块的规则
  resolve: {
    // 配置解析模块路径别名：优点简写路径，缺点路径没有提示
    alias: {
      // 定义一个@变量，可在import引入时使用
      '@': path.resolve(__dirname, './src')
    },
    // 配置省略文件路径的后缀名称 import '@/index'
    // 如果省略，建议文件名称不要重名了
    extensions: ['.js','.json','.art','.vue']
  }