Buffer 值通常是指为了在计算机系统中优化数据传输速度而引入的缓冲区。在数据传输中，缓冲区是用于暂时存储数据的区域。缓冲区能够减少 I/O 操作的次数，提高数据传输效率。在程序中，Buffer 值是指一个能够存放一定数据内容的固定或可变长度的数组或缓存区。通常我们会对 Buffer 值进行读写操作来存储或获取数据。在网络通信、文件处理、视频处理等场景中，Buffer 值是一种非常常见的数据类型。

module.exports = {c() {}}; a/b/c/c.js module.exports = {cc() {}}; a/b/c/cc.js { "main": "./c.js", "cc": "./cc.js"} a/b/c/package.json import foo from "moduleA/c"; console.log(foo); const path = require("path"); module.exports = { entry: "./index.js", output: { path: path.resolve(__dirname, "./dist"), filename: "bundle.js", }, resolve: { extensions:['.wasm', '.mjs', '.js', '.json','.jsx','.vue','.ts'], 解析到文件时自动添加扩展名： alias: { moduleA: path.resolve(__dirname, "a/b"), }, mainFields: ["cc"], 比main的优先级高 modules: ['node_modules'], 默认查找node_modules,一层层往上找 }, }; 结论：设置了mainFields，则打包cc文件，否则打包c文件

在js内导入的css文件，打包后，拆分为单独的css文件，而不是放入js文件内 [MiniCssExtractPlugin.loader, "css-loader"], new MiniCssExtractPlugin({ 生成的contenthash，不会因为js的变化，而生成新的值 filename: "css/index.[contenthash:8].css", })

改了index.js文件，最后打包发现main的hash值也变了，用chunkhash替换hash值 entry: { index: "./index.js", main: "./main.js" } output: { filename: "dist/[name].[hash:8].js" }

webpack的hash值是通过对打包后的文件内容进行哈希化处理生成的，其具体过程如下： 遍历入口文件，根据文件依赖关系生成打包后的代码块。 对每个代码块的内容进行哈希化处理，生成对应的哈希值。 将所有的哈希值拼接在一起，并且加上一些额外信息，如webpack版本号、构建时间等，形成最终的hash值。 把生成的hash值作为打包后的文件名或者生成的路径的一部分，以此保证每次构建生成的文件名称都是不同的。 由于webpack的hash值是包含了webpack版本号、构建时间等额外信息的，因此可以保证每次构建生成的hash值都是不同的，从而避免了浏览器缓存的问题。

Content Delivery Network（内容分发网络cdn） 方式一：打包的所有静态资源，放到CDN服务器，用户所有资源都是通过CDN服务器加载的，打包使用publicPath设置cdn服务器地址 方式二：一些第三方资源放到开源CDN服务器上，例如， 免除打包设置externals:{ lodash:'_' } ，在html模块中，加入

Shimming预支变量， shimming用垫片填入的意思 const { ProvidePlugin } = require("webpack"); new ProvidePlugin({ : "lodash", get: ["lodash", "xor"] }) 这样就可以在js内使用变量 和 get了

run-loader先优先执行PitchLoader，在执行PitchLoader时进行loaderIndex++； run-loader之后会执行NormalLoader，在执行NormalLoader时进行loaderIndex–； pitching: post, inline行内使用loader, normal默认, pre； normal: pre, normal, inline, post；

通常都是同步loader module.exports = function (content, map, meta) { console.log("loader02", content); this.callback(null/抛出错误, content 字符串或者buffer值); 这里有 // return content; };

异步loader，后面执行的loader会等待异步loader执行完，然后执行了callback函数，才会执行 module.exports = function (content, map, meta) { const callback = this.async(); setTimeout(() => { console.log("loader02", content); callback(null, content); }, 3000); };

校验loader传参数是否合法，规则是validate的第一个参数 const { validate } = require("schema-utils"); validate( { type: "object", properties: { name: { type: "string", }, }, }, this.getOptions() // 获取用户传的options对象 );

Highlight.js 是一个用 JavaScript 编写的语法高亮器。它既可以在纯浏览器端，也可以在服务端使用。它几乎可以处理任何标记，不依赖任何其他框架，并且具有语言自动检测功能。 import chalk from "chalk"; console.log(chalk.red("Error: something went wrong!"));

webpack环境分离 { "scripts": { "build":"webpack --config ./config/webpack.common.js --env production", "serve": "webpack serve --config ./config/webpack.common.js --env development" }, "dependencies": { "webpack": "^5.79.0", "webpack-cli": "^5.0.1" } } const path = require('path') const appDir = process.cwd() const resolveApp = (relativePath) => path.resolve(appDir,relativePath) const { merge } = require("webpack-merge"); const prodConfig = require("./webpack.prod"); const devConfig = require("./webpack.dev"); const commonConfig = { entry: "./src/index.js", output: { filename: "bundle.js", path: resolveApp("./build"), }, }; module.exports = function (env) { process.env.NODE_ENV = env.production ? "production" : "development"; return merge(commonConfig, env.production ? prodConfig : devConfig); };

学习webpack-dev-server { "scripts": { "watch":"npx webpack --watch", "build":"npx webpack", "serve": "npx webpack serve" } } npm run watch，启动webpack检测打包，不会退出进程，只要修改文件，会自动生成新的文件 vscode插件,live-server，启动一个服务，打开html文件，借用了window.location.reload() 当修改原文件，通过webpack动态打包后，生成新的文件，liver-server刚好可以检测到文件变化，页面就刷新一下 更新这一套可以做到，然而webpack采用的是webpack-dev-server webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，事实上webpack-dev-server使用了一个库叫memory-fs webpack 模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可；devServer:{ hot:true, open:true } 但是如果要热更新math.js文件，需要写如下代码： import foo from './math.js' console.log(foo) if(module.hot){ module.hot.accept('./math.js',()=>{ console.log('更新了。。。') }) }

index.html title.js export default '11' 修改title文件，可以看到页面的更新 index.js let root = document.getElementById('root') function render(){ let title = require('./title').default root.innerHTML = title } render() if(module.hot){ module.hot.accept('./title.js',()=>{ render() }) } webpack.config.js 配置devServer:{ hot:true, open:true } 如果没有写上面if(module.hot){}的代码，那么修改math.js文件，会刷新整个网页 修改了index.html文件后，如果上面加了if(module.hot){}的代码，那么修改math.js文件，页面是不会看到index.html更新后的内容，但是js可以看到修改后执行的代码，相反如果没加，那么会刷新整个页面代码

配置静态资源库 devServer:{ hot:true, open:true, static:[ { directory:path.join(__dirname,'assets'), publicPath:'/serve-public-path-url' }, { directory:path.join(__dirname,'css'), publicPath:'/other-serve-public-path-url' }, ] } ↓ assets manifest.json ↓ css manifest.json 访问localhost:8080/serve-public-path-url/manifest.json 展示该文件 访问localhost:8080/other-serve-public-path-url/manifest.json 展示该文件

/api/users ----> http://localhost:3000/api/users devServer:{ proxy: { '/api' : 'http://localhost:3000' } } /api/users ----> http://localhost:3000/users devServer:{ proxy: { '/api' : { target: 'http://localhost:3000', pathRewrite : { '^/api' : '' } }

}

}

historyApiFallback historyApiFallback是开发中一个非常常见的属性，它主要的作用是解决SPA页面在路由跳转之后，进行页面刷新时，返回404的错误。 默认是false，如果设置为true，那么在刷新网页返回404错误时，会自动跳转到index.html 如果设置为object类型，可以配置rewrites属性： devServer:{ historyApiFallback: { rewrites: [ { from: /^/$/, to: '/views/landing.html' }, { from: /^//subpage, to: '/views/subpage.html' }, { from: /./, to: '/views/404.html' }, ] } }

处理vue文件，且让它具有热更新 babel.config.js module.exports = { presets:[ '@babel/preset-env' ] } ./src/index.js import Vue from 'vue' import VueApp from './App.vue' new Vue({ render: h => h(VueApp) }).$mount('#root') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { mode:'development', entry:'./src/index.js', output:{ filename:'bundle.js', path:path.resolve(__dirname,'./build') }, devServer:{ hot:true }, module:{ rules:[ { test:/.vue$/i, use:'vue-loader' }, { test:/.css/i, use:['style-loader','css-loader'] } ] }, plugins:[ new HtmlWebpackPlugin({ template:'./index.html' }), new VueLoaderPlugin() ] }

学习babel @babel/core核心代码 @babel/cli可在终端敲命令 npx babel index.js --out-file bundle.js use:{ loader:'babel-loader', options:{ plugins:[ 插件功能有限 '@babel/plugin-transform-arrow-functions', '@babel/plugin-transform-block-scoping', ], presets:['@babel/preset-env'] 提取到babel.config.js有module.exports = { 上面的预设放到这里 } } } 为了让postcss使用同一套设置，于是就统一设置在.browserslistrc 预设优先级： options:{ presets:['@babe/preset-env', { target:['chrome 88'] } ] } package.json 里的 browserslist 字段 .browserslistrc 配置文件 多预设 preset:[ 'preset-env', 'preset-react', 'stage-3' ] 在babel7之前，经常看到stage-x，表示babel-preset-stage-x预设，但是babel7开始不建议使用， 建议使用preset-env preset:['@babel/preset-env']

babel配置文件 .babelrc.json：早期使用较多的配置方式，但是对于配置Monorepos项目是比较麻烦的； babel.config.json（babel7）：可以直接作用于Monorepos项目的子包，更加推荐； Monorepos 和 Multirepos 项目架构

@babel/polyfill 是一种 JavaScript 库，它提供了从 ECMAScript 2015+ 到 ES5 的兼容性解决方案，以确保更广泛的浏览器和环境下的 JavaScript 代码复用。 @babel/polyfill 提供了以下功能： 填充 ECMAScript 2015+ 新特性：@babel/polyfill 能够填充 ECMAScript 2015+ （ES6+）引入的许多新特性，如 Promise、WeakMap、Array.from 等。 支持实例方法：包括 String.includes() 和 Object.entries() 等实例方法的 polyfill ，使之能够在不支持这些方法的旧版浏览器中使用。 实现 generator 函数转换：将 generator 函数（通过 yield 表达式执行异步操作、构造状态机等等）转换成较早版的 ES5 代码。 支持 async/await 语法糖：把 async/await 语法糖编译成 ES5 代码。 使用 @babel/polyfill 库，可以在项目中轻松使用最新版本 ECMAScript 标准中的大量新特性，同时确保代码表现一致性，可移植性和稳健性。 babel7.4.0之前，可以使用 @babel/polyfill的包，但是该包现在已经不推荐使用了 babel7.4.0之后，yarn add core-js regenerator-runtime 在babel.config.js内配置 module.exports = { presets:[ [ "@babel/preset-env", { // 设置为false 不使用polyfill，且不需要设置corejs； // 设置为usage 哪里用到了，就引入相关的api，需设置corejs版本 // 设置entry 需要在入口头部import 'core-js/stable' import 'regenerator-runtime/runtime' useBuiltIns:"usage",如果依赖某个库已经使用了自己的polyfill特性，如果我们使用usage就会报错，用entry就解决了问题，这样会根据 browserslist 目标导入所有的polyfill，但是对应的包也会变大；匹配js，需要exclude:/node_modules/ corejs: 3 // 'core-js':'^3.24.1' 默认配置corejs是2，需要设置跟你的包版本一样 } ] ] } 在前面我们使用的polyfill，默认情况是添加的所有特性都是全局的 如果我们正在编写一个工具库，这个工具库需要使用polyfill； 别人在使用我们工具时，工具库通过polyfill添加的特性，可能会污染它们的代码； 所以，当编写工具时，yarn add @babel/plugin-transform-runtime 在使用 ES6+ 新特性时避免引入冗余的 polyfill 方法，以达到减小打包体积的目的。同时还可以避免全局范围内污染对象、方法名冲突等问题。 使用plugins来配置babel.config.js： module.exports = { presets:[ ['@babel/preset-env'] ], plugins:[ ['@babel/plugin-transform-runtime',{ 'corejs':3 // yarn add @babel/runtime-corejs3 和上面3对应 }] ] }

webpack启动流程 webpack命令 --> ./node_modules/.bin/webpack --> 执行runCli webpack-cli的package.json的bin字段 --> webpack-cli bin/cli.js --> bootstrap.js runCli方法 --> 创建WebpackCli对象cli.run方法 --> webpack-cli.js constructor构造方法 --> webpack-cli.js run方法 --> webpack-cli.js makeCommand方法 --> webpack-cli.js makeOption方法对参数进一步处理 --> webpack-cli.js buildCommand方法 webpack-cli.js createCompiler方法 --> webpack-cli.js webpack(options)