## loader
loader本质上就是一个函数

使用自己本地的loader
```js
use:[
    {loader:path.resolve(__dirname,'./loader/a')},
    {loader:path.resolve(__dirname,'./loader/b'),}
]
```
使用resolveLoader参数（webpack配置项）：
```js
resolveLoader: {
    modules: ['node_modules','./loader']
}
use:[
    {loader:'a'},
    {loader:'b'}
]
```


```js
const loaderUtils=require('loader-utils')
module.exports=function (source) {  // option参数获取
    const options=loaderUtils.getOptions(this)
}

module.exports=function (source) { // callback，不需要手动return
    const result=source.replace(/1/g,'2').replace(/console.log$.*$/g,'')
    this.callback(null,result)
}

module.exports=function (source) { // 提前执行async，告知是异步返回
    const result=source.replace(/1/g,'2').replace(/console.log$.*$/g,'')
    const callback=this.async()
    setTimeout(()=>{
        callback(null,result)
    },3000)
}
```

## plugin
plugin本质上就是一个类

webpack plugin会自动使用apply函数，参数compiler下的hooks是plugin的各种生命周期。
tapAsync时，需要手动调用下callback，tap时不需要。constructor可以获取参数。

```js
class A {
    constructor(options){
        this.name=options.name
    }
    apply(compiler){
        compiler.hooks.compile.tap('A',()=>{
            console.log('每次编译都会被执行')
        })
        compiler.hooks.emit.tapAsync('A',(compilation,cb)=>{
            compilation.assets[`${this.name}.txt`]={
                source:function(){
                    return '4'
                },
                size(){
                    return 6
                }
            }
            cb()
        })
    }
}

module.exports=A
```

## bundle

**readFileSync**

fs.readFileSync 会以你当前npm的执行路径为当前路径，而不是文件路径
readFile必须填写第二个参数（callback），不填写则报错

**@babel/parser**

content为文本，可以将文本输出为AST语法解析树
```js
const parser=require('@babel/parser')
const AST=parser.parse(content,{
    sourceType:'module'
})
```

**@babel/traverse**

根据你提供的语法解析树，筛选出你需要的树
```js
const traverse=require('@babel/traverse').default
traverse(AST,{
    ImportDeclaration({node}){
        console.log(node)
    }
})
```

**@babel/core**

将语法树转换为es5代码
```js
const babel=require('@babel/core')
const {code}=babel.transformFromAst(AST,null,{
    presets:["@babel/preset-env"]
})
```

**webpack bundle实现**

1. 获取入口文件js的文本内容
2. 将入口文件的文本内容转换为AST抽象语法树
3. 筛选出入口文件内的import语句
4. 将入口文件的import整合成一个对象（为什么不整合成数组：可以以文件的相对路径来命名）
5. 通过babel模块的core和preset将代码转换为浏览器能识别的代码
6. 每个文件都输出filename, dependencies, code
7. 至此我们获取到了入口文件解析后的代码以及入口文件的依赖关系
8. 通过递归，解析入口文件的依赖关系，以及解析依赖文件的依赖关系，直到所有依赖文件被解析
9. 至此我们获取到了所有文件的依赖关系
10. 将所有文件的依赖图谱转换为对象，filename:{ dependencies,code   }
11. 将图谱转换为可以运行的代码
12. 通过fs模块将文件输出到本地，进行使用


```js
const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const core = require('@babel/core')


const moduleSync = function (entry) {  //给定入口文件，输出文件解析后的代码以及相关依赖
    const content = fs.readFileSync(entry, 'utf-8') //读取文件的JS内容
    const AST = parser.parse(content, {  //将JS内容导出为AST抽象语法树
        sourceType: 'unambiguous'
    })
    const dependencies = {}
    traverse(AST, {   //从AST抽象语法树中筛选出import相关内容
        ImportDeclaration({node}) {
            const dirname = path.dirname(entry) //获取当前JS的所在文件夹(相当于当前node执行路径)
            const file = path.join(dirname, node.source.value) //关联资源的路径(相当于当前node执行路径)
            dependencies[node.source.value] = file
        }
    })
    const {code} = core.transformFromAst(AST, null, {
        presets: ["@babel/preset-env"]
    })
    return {
        filename: entry,
        dependencies,
        code
    }
}

const transformGraph = function (moduleArr) { //将数组格式转换为对象格式，后续方便会用
    let graph = {}
    moduleArr.forEach(item => {
        const key = item.filename
        graph[key] = {
            dependencies: item.dependencies,
            code: item.code
        }
    })
    return graph
}

const makeDependGraph = function (entry) { //生成入口文件和其所有的依赖项
    let entryModule = moduleSync(entry)
    let moduleArr = [entryModule]
    for (let i = 0; i < moduleArr.length; i++) { //for循环每次增加后，都可以在进行一次，而forEach不行
        const dependencies = moduleArr[i].dependencies
        for (let j in dependencies) { //对依赖项进行遍历，如果存在，则再次对其进行统计其依赖项
            moduleArr.push(moduleSync(dependencies[j]))
        }
    }
    return transformGraph(moduleArr)
}

const generateCode=function(entry){ //将对象转换为code代码
    let graph=JSON.stringify(makeDependGraph(entry))
    return `(function(graph){
      function require(entry){
        function localRequire(relativePath){ 
          return require(graph[entry].dependencies[relativePath])
        }
        var exports={};
        (function(require,exports,code){
          eval(code)
        })(localRequire,exports,graph[entry].code)
      }
      require('${entry}')
    })(${graph})`
}

let result = generateCode('src/index.js')

fs.writeFileSync('./index.js',result)

```





Webpack loader、plugin、bundle

## 支付路径问题（ios）
vue单页面开发时，ios会以Landing Page（第一次进入的页面）去进行对比，android下会以current Page（当前页面）进行比较。所以ios即使切换路由，它也只会永远记录第一次页面。

### 解决方案：
1. 支付路径配置   http://h5.safetree.com.cn/vue
2. 在路由的#前面加个?号，微信浏览器就会把后面的路由当成参数过滤掉了。如：http://h5.safetree.com.cn/vue/?#/home/index
忽略后的路径将都是http://h5.safetree.com.cn/vue，无论是android还是ios下，都将生效。
所以我们无论如何切换，微信都会认为路径在http://h5.safetree.com.cn/vue下，所以就可以在任何目录下都可以进行支付。

## 签名报错问题
当路由跳转几步以后，我们将vue页面切换到其他外链。然后在该外链下，快速返回两次。会报出签名失败的错误（config:invalid signature）

是因为我们将location.href当做了签名url，快速的返回两次。回退的第一个页面，签名请求还未结束，所以该请求在第二个页面进行了签名。导致了当前页面的location.href和签名时的页面不一致。

### 解决方案：
URL 要确保只获取 # 号之前部分（有 # 号的话）
http://h5.safetree.com.cn/vue/? 我们将这个链接当做签名url，这个问题将得到解决



支付路径+签名报错(spa)

**Webpack是一个现代化的JavaScript应用程序的模块打包工具，它可以将各种静态资源（包括JavaScript、CSS、图片、字体等）打包成一个或多个JavaScript文件，以便于在浏览器中加载和运行。Webpack具有强大的模块化支持，可以通过各种插件和loader扩展其功能，使得它成为JavaScript应用程序开发中不可或缺的工具之一。**



## npx webpack
**npx webpack index.js**

webpack会用默认配置对index.js进行处理，例如：
创建文件夹dist，index.js内容输出到dist/main.js
必须添加入口文件，npx webpack 则会报错。

**npx webpack**

webpack，默认以根目录下的webpack.config.js为配置文件，配置项如果添加了入口文件，就不需要npx webpack index.js显示指定入口文件了。
当然你也可以指定其他文件为配置文件，只需要npx webpack --config webpackConfig.js。

## 常见loader
file-loader：（可作用于字体，图片，音频等多种文件）将文件打包至文件夹（会存在于文件）

url-loader：（可作用于字体，图片，音频等多种文件），与file-loader一致，是将文件打包成base64内联（不会存在文件）

sass-loader：解析scss，sass文件

postcss-loader：通过postcss插件，对css文件进行处理，比如autoprefixer，postcss-pxtorem

css-loader：解析css文件，参数 importLoaders => 用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader。
参数 modules => 设置为true时，可以通过模块化引入css时，标签元素不会被模块化，但是所有被处理过后的都会变成独立的，无法全局引入css

style-loader：将css文件内容内联到style

## devtool理解

![image.png](https://blog.ccz.life/static/img/98c5e03f7422be4daad34724b175361a.image.png)
- inline-source-map：source-map内联进js代码（速度比较慢，报错会映射行和列）
- cheap-source-map：（速度比较快，报错会映射行，但是不会映射列）
- cheap-module-source-map：会保留源自 loader 的 source map（其余和cheap-source-map一致）
- eval-source-map：（速度比较快，使用eval的方式输出）
- source-map：完整的报错信息（精确映射行，列）

## dev-server理解
**npx webpack -w**

 根据webpack.config.js的配置，文件每次修改都会产生实际的修改后的文件，构建速度慢，而且需要手动刷新页面
 
**webpack-dev-server**

根据webpack.config.js的配置，文件每次修改都会在内存中产生文件，构建速度更快，不需要自己手动刷新页面

**自己编写server**

根据webpack.config.js的配置，文件每次修改都会在内存中产生文件，构建速度更快，需要手动刷新页面
```js
const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const config=require('./webpack.config')
const compiler = webpack(config);
const express = require('express');
const app = express();
app.use(middleware(compiler, {}));
app.listen(3000, () => console.log('Example app listening on port 3000!'));
```

**webpack-dev-server 手动监听热更新**
```js
 if (module.hot) {
   module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!');
    printMe();
   })
 }
```

## Tree Shaking理解
只支持ES Module的模块引入（因为ES Module 是静态引入）可以摇走无用的代码

webpack4 mode模式为produciton的时候默认引入 
```js
optimization: {
    usedExports: true
}
```

package.json里面sideEffects字段："sideEffects":false
值为false的情况下所有文件的都会进行检测，最好别填，会有默认配置或者["@babel/polyfill","*.css"]可以忽略这些文件

## splitChunks，runtimeChunk理解

### splitChunks
**1.进行如下配置，将自动把用到的插件统一打成一个js**
```js
optimization: {
    splitChunks:{
      chunks:'all'
    }
}
```
```js
import _ from 'lodash'
import axios from 'axios'
```

lodash和axios都会被打包成vendords-main.js

**2.import异步导入时，会自动分割模块代码分割，例如：**
```js
function get() {
    return import(/* webpackChunkName: "lodash" */'lodash').then((s) => {
        console.log(s.default.join(['a', 'b', 'c']))
    })
}
get()
```
此时的lodash会被单独打成vendor~lodash.js，没有显示定义名字则为0.js。
如果异步用到的包，在插件里面有被使用到，则splitChunks会很智能的把相同模块的内容，打到vendords-main.js插件包里面去

**3.如果定义了名字，所有的模块都会被打包成一个vendor.js（包括异步模块和插件）**
```js
optimization: {
    splitChunks: {
        chunks: 'all',
        name: 'vendor'
    }
}
```



4.分包配置
```js
config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
          libs: {
              name: 'chunk-libs',
              test: /[\\/]node_modules[\\/]/,
              priority: 10,
              chunks: 'initial' // 只打包初始时依赖的第三方
          },
          vant: {
              name: 'chunk-vant', // 单独将 vant 拆包
              priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
              test: /[\\/]node_modules[\\/]vant[\\/]/
          },
          commons: {
              name: 'chunk-commons',
              test: resolve('src/components'), // 可自定义拓展你的规则
              minChunks: 3, // 最小公用次数
              priority: 5,
              reuseExistingChunk: true
          }
      }
  })
```

### runtimeChunk
它的作用是将包含chunks 映射关系的 list单独从 app.js里提取出来，因为每一个 chunk 的 id 基本都是基于内容 hash 出来的，所以你每次改动都会影响它，如果不将它提取出来的话，等于app.js每次都会改变。
```js
config.optimization.runtimeChunk({
    name:'manifest'
})
```

## preload prefetch
Preload 是一个声明式 fetch，可以强制浏览器在不阻塞 document 的 onload 事件的情况下请求资源。
Preload通常用于本页面要用到的关键资源，包括关键js、字体、css文件。Preload将会把资源得下载顺序权重提高，使得关键数据提前下载好，优化页面打开速度。

Prefetch 告诉浏览器这个资源将来可能需要，但是什么时间加载这个资源是由浏览器来决定的。
也就是说prefetch通常用于加速下一次导航，而不是本次的。


## 环境变量定义

可以在启动命令时设置环境变量，
```json
"scripts": {
  "bundle": "webpack",
  "dev": "webpack-dev-server --env.development",
  "build":"webpack --env.production"
}
```
但是这种环境变量只有在配置文件里面使用函数导出才能被读取，
```js
module.exports=(env)=>{
    if(env.production){
         console.log('生产环境')
    }
  return { }
}
```
process.env读取不到这样定义的变量，需要被读取到，使用cross-env

## webpack 性能优化
- node，npm，yarn版本尽可能的新
- 用好loader的include，exclude，不对无用模块进行loader处理
- plugin环境区分，比如开发环境不使用代码压缩，分割之类的
- resolve extensions尽量少配置，资源查找时会有损耗
- 第三方模块提前打包dll

## dll

1.第三方模块打包，且生成包的映射关系

添加命令：
```json
"dll": "webpack --config ./dll/webpack.dll.js",
```
执行命令，生成dll.js和dll.json，生成的dll需要带hash，避免缓存。DllPlugin的name需要和library相同。

dll/webpack.dll.js
```js
const path=require('path')
const webpack=require('webpack')
module.exports={
    mode:'production',
    entry:{
        dll:['axios','better-scroll','vue','vue-router','vuex']
    },
    output:{
        filename:'chunk-[name].[chunkhash:8].js',
        path:path.resolve(__dirname,'./'),
        library:'[name]'
    },
    plugins:[
        new webpack.DllPlugin({
            name:'[name]',
            path:path.resolve(__dirname,'./chunk-[name].manifest.json')
        })
    ]
}
```

2.生产环境下，使用dll
```js
const webpack=require('webpack')
const path = require('path')
const AddAssetHtmlPlugin=require('add-asset-html-webpack-plugin')
new AddAssetHtmlPlugin({
    filepath:path.resolve(__dirname, './dll/chunk-dll.*.js'),
    outputPath:'js',
    publicPath:`${publicPath}js`
}), //dll.js添加
new webpack.DllReferencePlugin({
    manifest:path.resolve(__dirname, './dll/chunk-dll.manifest.json')
})  //dll 映射关系
```

## PWA

navigator.serviceWorker只在HTTPS或者localhost生效

webpack配置
```js
const workBoxPlugin=require('workbox-webpack-plugin')
new workBoxPlugin.GenerateSW({
    clientsClaim:true,
    skipWaiting:true
})
```
main.js入口文件配置
```js
if('serviceWorker' in navigator){
  window.addEventListener('load',()=>{
    navigator.serviceWorker.register('./service-worker.js').then((res)=>{
      console.log('pwa success',res)
    }).catch((err)=>{console.log('pwa error',err)})
  })
}

workbox.setConfig({debug: false});  关闭console log信息
```

Webpack4 学习

打开微信任意一个聊天界面，输入"debugx5.qq.com"，发送，点击已经发送出去的这条消息，可以进入到"X5 调试页面"，如图：

![image.png](https://blog.ccz.life/static/img/5a9514b9f27a72af9c584b1726840848.image.png)

![image.png](https://blog.ccz.life/static/img/d34c79a0068e554caee8bbfbe8a92385.image.png)

微信下调试h5

**Verdaccio 是一个轻量级的、可扩展的、私有的 npm registry 服务器，它允许开发人员在本地网络环境中创建和管理自己的 npm packages，从而加速应用程序的开发和部署。使用 Verdaccio，开发人员可以在不将其代码发布到公共 npm registry 上的情况下共享和重用自己的 npm packages。**

**本文将记录 Verdaccio 本地部署方法，以下操作均在Linux环境下进行。**



# 安装
## 1. 创建verdaccio容器
```bash
docker run -it -p 4873:4873  --name verdaccio centos bash
```
## 2. nvm安装
```bash
# 下面两个安装方式，任选其一就行
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash  
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

source ~/.bashrc  
nvm --version  # 可查看nvm版本，说明安装成功
```
## 3. 利用nvm安装node（8.9.1）
```bash
 nvm install v10.16.0  # 安装node的稳定版本（npm会同步当前版本的node）
```

## 4. 安装verdaccio、pm2
```bash
npm install -g verdaccio --registry=https://registry.npm.taobao.org/
npm install -g pm2  --registry=https://registry.npm.taobao.org/
```

## 5. 修改verdaccio-config配置（空格要严格区分，否则无法启动）
配置修改注意：配置项前面多个空格，都无法加载。需严格区分空格

config默认存放路径：/root/.config（需启动一次后才会出现verdacci文件夹）
```bash
verdaccio  # 首次启动自动创建verdacci文件夹，启动后关闭
cd /root/.config/verdaccio  
vi config.yaml   # 修改配置
```
config.yaml修改如下（部分配置需要提前运行命令）
```yaml
# ①.端口号配置
listen:       
 0.0.0.0:4873
# ②.上行链路修改为淘宝镜像源
uplinks:
  taobaojs:
    url:  https://registry.npm.taobao.org/
packages:
  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: taobaojs
# ③.日志配置
# 运行：mkdir log 
# 在verdaccio目录下创建log，存放log日志（不提前创建，会报错）
# tip：到本次修改后，pm2 start verdaccio开启服务，查看服务是否正常启动
logs:
 - {type: rotating-file, format: json, path: /root/.config/verdaccio/log/log.json, level: http, options: {period: 1d, count:3} }
# ④.LDAP配置（禁止命令行注册，LDAP登录，编辑htpasswd创建用户）
# 参数讲解：
# htpasswd如果不加，效果是一样的，禁止注册
# htpasswd添加进去有个好处是，可以通过htpasswd文件创建用户
# LDAP插件安装：
# 运行：npm install -g verdaccio-ldap --registry=https://registry.npm.taobao.org/   全局安装ldap插件
# 查看是否可以成功启动，如果无法启动，尝试
# 运行：npm install verdaccio 
# 运行：npm install
# tip：邮箱全名无法登录，只能使用名字登录，
# 比如chenchongzuan@baishishuju.cn无法登录，使用chenchongzuan可以进行登录
 ldap:
    type: ldap
    client_options:
      url: "ldap://192.168.50.203:389"
      searchBase: "ou=Tech,ou=Users,dc=ankang,dc=com"
      searchFilter: "(uid={{username}})"
      reconnect: true
  htpasswd:
    file: ./htpasswd
    max_users: -1
# ⑤.包权限修改（任何用户均可发布私有包，只有root用户才可以撤销私有包，私有包存放在company路径下）
packages:
  'c-*':
    access: $all
    publish: $authenticated
    unpublish: root
    storage: company
  'company-*':
    access: $all
    publish: $authenticated
    unpublish: root
    storage: company
  '**':
    access: $all
    publish: $authenticated
    unpublish: root
    proxy: taobaojs

```

## 6. Dockerfile启动配置
创建脚本
```bash
vi start.sh
```
start.sh脚本内容如下：
```bash
#!/bin/bash
source ~/.bashrc #（或者尝试source /etc/profile）
pm2 start verdaccio
tail -f /dev/null      
```
修改后，继续执行以下命令
```bash
chmod u+x *.sh # 给予脚本启动权限
./start.sh # 运行./start.sh查看脚本是否可以正常启动
docker commit verdaccio docker/verdaccio # 将verdaccio容器打包成docker/verdaccio镜像
```
编写Dockerfile，Dockerfile内容如下：
```
FROM docker/verdaccio
WORKDIR /root/.config/verdaccio
ENTRYPOINT ["./start.sh"]
```
创建镜像
```bash
docker build -t docker.privete/verdaccio  /dockerFile/verdaccio/ # 以 /dockerFile/verdaccio/下的Dockfile为配置进而创建镜像，镜像名为docker.privete/verdaccio
```
创建容器
```bash
docker run -itd -p 4873:4873  --restart=always -v /opt/verdaccio-registry/storage:/root/.config/verdaccio/storage -v /opt/verdaccio-registry/log:/root/.config/verdaccio/log   --name front-end-registry  docker.privete/verdaccio

# 1.端口映射4873 -d（开启后台进程）
# 2. --restart=always  关闭时，会自动重启，比如进入容器时，exit退出，容器会自动重启，比如docker start -i 进入，退出后，也会自动重启。除非手动stop
# 3.
# 主机的/opt/verdaccio-registry/storage的文件夹映射到容器的/root/.config/verdaccio/storage（包）
# /opt/verdaccio-registry/log的文件夹映射到容器的/root/.config/verdaccio/log（日志）
# 当主机不存在文件夹时，会自动创建
# 4.容器名字为front-end-registry，以 docker.privete/verdaccio镜像为基础
```

--------------------完结--------------------

# 用户权限
packages 权限配置：
- access  没有该权限时，无法下载包和查看包，需登录才能看到包
- publish  没有该权限时，无法发布包
- unpublish 如果unpublish已注释掉，则publish定义将授予或拒绝访问权限。不填写或者值为undefined时，则任何用户，都无法删除

权限：
- root 管理员
- $all 所有人
- $authenticated 登录用户
- $anonymous  匿名用户
- undefined 不填写时，值也为undefined，任何情况下，都无法操作