随笔分类 - webpack
摘要：目录 前言 模块联邦概念 使用配置 模块联邦优点 模块联邦缺点 动态远程模块 前言 工作中公共模块通过子仓库在多个项目中使用，其中公共头部，登录，反馈、举报等模块业务与技术栈都和项目耦合很深，在每个项目都会将这些公共模块打包进去，为了减少流量成本，考虑将这些模块打包后放到cdn，对比了webpack
阅读全文
摘要：虽然webpack5已经发布两年了，然而公司内部还有许多个项目仍然使用的是webpack4，最近一个小需求却导致打包结果发生了很大变化，于是重新研究了下splitChunks配置。 默认配置 splitChunks: { chunks: 'async', minSize: 30000, maxSiz
阅读全文
摘要：loader:"vue-loader" ,引导vue文件被vue-loader/lib/index.js处理 第一步：解析vue文件 const utils = require('@vue/component-compiler-utils') utils.parse(.vue文件)，返回一个json
阅读全文
摘要：svg标签直接在页面使用 不多说。 其他标签使用svg 除了直接使用svg标签，还有如下方法： <object data="your.svg" type="image/svg+xml" id="svg1"> <img src="yourfallback.jpg" /> </object> <img
阅读全文
摘要：前言： 开发 vue 组件库需要提供组件的使用文档，最好是有渲染到浏览器的 demo 实例，既能操作又能查看源代码。markdown 作为常用的文档编写载体，如果能在里面直接写 vue 组件，同时编写使用说明就再好不过。流行的组件库 element-ui 的文档就是用 markdown 写出来的，看
阅读全文
摘要：版本 babel-loader version:"8.1.0" create-react-app:"3.4.1" 三个配置 第一部分： { test: /\.(js|mjs|jsx|ts|tsx)$/, include: paths.appSrc, loader: require.resolve('
阅读全文
摘要：记一次webpack打包的问题 在webpack打包中开启了webpack-bundle-analyzer，发现了一个chunk：tinymce  在整个项目中查找，只有一个未被使用的组件中有如下代码： import Tinymce from '@/components/Tinymce 删除Tin
阅读全文
摘要：html-webpack-plugin在html中插入数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title><%= htmlWebpackPlugin.options.title %></title> </head> <bod
阅读全文
摘要：webpack收集完依赖是怎么打包资源的呢? 入口compiler.js： this.applyPluginsParallel("make", compilation, err => { if(err) return callback(err); compilation.finish(); comp
阅读全文
摘要：webpack源码-依赖收集 version:3.12.0 触发make钩子 Compilation.js 执行EntryOptionPlugin 中注册的make钩子 执行compilation.addEntry 执行compilation._addModuleChain Compilation.
阅读全文
摘要：版本 webpack :"version": "3.12.0", webpack配置中的loaders配置是如何传递的 webpack/lib/NormalModuleFactory.js 经过ruleSet.exec处理找到处理当前模块的loader 到此处，result中的loader字段的值仍
阅读全文
