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进行运行打包配置。
@H_502_143@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自动化打包工具
@H_502_143@# 安装 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的时候，需要注意：
打包处理scss文件
@H_502_143@# 安装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.配置图片处理
@H_502_143@# 安装
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.处理静态资源
像项目中字体资源是不需要进行打包处理的，可以直接的通过复制方式给打包到目标目录中
@H_502_143@# 安装
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
@H_502_143@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，而不是把它打包进来使用
@H_502_143@import $ from 'jquery'
webpack.config.js
externals: {
jquery: 'jQuery'
}
13.路径与导入后缀省略
@H_502_143@ // 解析模块的规则
resolve: {
// 配置解析模块路径别名：优点简写路径，缺点路径没有提示
alias: {
// 定义一个@变量，可在import引入时使用
'@': path.resolve(__dirname, './src')
},
// 配置省略文件路径的后缀名称 import '@/index'
// 如果省略，建议文件名称不要重名了
extensions: ['.js','.json','.art','.vue']
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
