zhaoge's blog

宏任务和微任务生成方式：microtask：Promise、process.nextTick等macrotask：代码块、setTimeout、setIntervalconsole.log('1'); // 宏任务1setTimeout(() => { console.log('2'); // 宏任务3}, 0);Promise.resolve().then(() => { console.log('3'); // 微任务1}).then(() => {

1.输出文件的文件名使用substitution（可替换模板字符串）的方式output: { filename: "[name].[contenthash].js", ...},2.提取引导模板如果要验证这一块的功能，现将./src/index.js文件中异步import的方法注释，换上第一章在的代码// async function getComponent() {// const element = document.createElement("div");// cons

1

1

1

1.引入CSS文件安装css-loader和style-loadernpm install --save-dev style-loader css-loader修改webpack.config.js因为是链式调用loader，所以style-loader和css-loader顺序一定是图上所示2.引入image图像{ test: /\.(png|svg|jpg|jpeg|gif)$/i, type: "asset/resource",},...

问题因为某些原因全局安装了webpack，发现版本为5.38.1webpack -vnpm install --global webpack全局路径：C:\Users\z.ziyu\node_modules再去执行npm start发现报错webpack版本不同无法生成执行文件。在工程中的node_modules版本为4.44.2。跨越了很大一个版本v4→v5为了跑起来只能删掉全局的新版本v5，命令：npm uninstall --g webpack命令不一定好用，直接将文件夹拖至回收站亦

1.webpack最好不要全局安装原因：会导致版本锁死，当工程的依赖（/node_module/webpack）升级时，版本不同会导致构建失败。2.需要安装lodashnpm install --save lodash结果如果只使用在测试环境下使用命令npm install --save-dev webpack-cli3.使用配置文件webpack.config.js它的只要作用是将命令行中输入的命令集中于配置文件中为了方便在package.json中配置脚本启动参数输入npm

感谢网络文章及朋友们对我的帮助公共配置代码量较小且变动频繁的代码，写入html文件之中。（目前我遇到的是异步加载JS文件）增量发布使用webpack-md5-hash插件对静态资源进行处理第一次发布全量包，标注1.0版本第二次打全量包和1.0版本比对（文件名，文件大小，内容？），生成增量包，标注1.0.1版本后续的全量包和1.0+1.0.1（每次迭代的增量包的合并）比对生成新的增量包，标注1.0.2版本以后都比对之前所有包的合并版本和本次打包（打包是全量打包）生成新增量包，也

核心概念entry单个入口（简写）语法：entry: string|Array<string>对象语法：entry: {[entryChunkName: string]: string|Array<string>}module.exports = { entry: './path/to/my/entry/file.js' // 该写法和我的一样 entry: { // 该写法有扩展性（多页面应用程序） pageOne: './src/pageOne/i