前端程序猿steven的博客

1、简介实现微前端有single-spa、qiankun现在有新的方式，借助webpack5新特性，模块联邦实现微前端2、使用流程介绍2.1 首先有一个host项目ModuleFederationPlugin 配置介绍webpack配置let path = require("path");let webpack = require("webpack");let HtmlWebpackPlugin = require("html-webpack-plugin");+ co

webpack5大致使用和webpack4相同介绍下新的特性1、启动命令不一样了webpack serve 就能启动 webpack-dev-server "scripts": { "build": "webpack", "start": "webpack serve" },packjson结构{ "name": "zhufeng-webpack5-202012", "version": "1.0.0", "description": "", "main":

webpack5使用1.安装依赖包创建一个文件夹npm init 生成package.json文件夹 然后安装依赖 cnpm webpack webpack-cli html-webpack-plugin webpack-dev-server cross-env -D新建一个webpack.config.js文件写配置新建src/inde.js 文件新建模板文件 src/index.htmlpackjson命令"scripts": { "build": "webpa

webpack3.0升级4.0记录一、为什么升级webpack3.04.0有如下优点1、4.0的treeshaking，代码更轻量，减少冗余代码。2、使用了splitChunkPlugin, 告别了commonChunkPlugin，代码分割更完善了。3、引入mode参数3.1、 production参数：3.2、 development参数4、构建时间提速98%。二、安装必要依赖三、修改新的配置1、webpack.base.config.js修改2、webpack.dev.config.js修改3、web

DLL plugin打包步骤.dll为后缀的文件称为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据把基础模块独立打包出来放到单独的动态链接库李当需要导入的模块在动态链接库的时候，模块不能再次打爆，而且从动态链接库里面获取DllPlugin插件：用于打包一个个动态链接库DllReferencePlugin:在配置文件中引入DllPlugin插件打包好的动态链接库1、定义配置文件和命令 "build:dll": "webpack --config build/webpack.d

1、费时分析// webpack.dev.confconst SpeedMeasurePlugin = require("speed-measure-webpack-plugin");const smp = new SpeedMeasurePlugin();module.exports = smp.wrap(merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev

1. 安装cnpm i react react-dom -Scnpm install webpack webpack-cli webpack-dev-server image-webpack-loader mini-css-extract-plugin purgecss-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react terser-webpack-plugin html-webpack-plu

1、构建流程初始化参数， 从配置文件和shell语句读取和合并参数，得出最终的参数。开始编译：用上一步得到的参数初始化Compiler对象。加载所有配置的插件。执行对象的run方法开始编译。确定入口：根据配置中的entry找出所有的入口文件。编译模块：从入口文件出发，调用所有配置的Loader对模块进行编译，再找到该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过本步骤的处理完成模块编译：经过上一步使用Loader编译完所有模块后，得到了每个模块翻译后的最终内容以及他们之间的依赖关系

webpack热更新原理1、 什么是HMR2、搭建HMR项目3、热更新流程图3、项目文件4.手写实现webpack-dev-server.js5、编写客户端更新模块webpackHotDevClient6、总结* 集成 Socket.IO介绍 （只是普及和上面无关）1、 什么是HMRHot Module Replacement是指当你对代码修改并保存后，webpack将会对代码进行新打爆，并将新的模块发送到浏览器端。相对于live reload 刷新页面的方案， HMR的有点在于保存应用的状态，提高开