webpack散记
1. manifest
manifest存储了webpack的chunk相关的信息。具体为一个对象,或者包含runtime的一段代码。其中包含着一个chunkId,已经对应chunkId的相关信息,例如异步模块的
文件名和路径
2. HashedModuleIdsPlugin
将打包出来的moduleId从自增的数字换成相对的文件路径的hash值,使得moduleId在文件位置和内容不变的情况下,不会发生变化。
3. webpack4 CacheGroup可参考的配置
// 打包node_modules,排除lodash venders: { test: /node_modules\/(?!(lodash)\/)/, name: 'vendors-common', chunks: 'all' }, // 只打包lodash,并命名为 vender-lodash lodash: { test: /node_modules\/lodash\//, name: 'vender-lodash' }, //将多个异步加载的模块共用的部分打进utils中, reuseExistingChunk 是重用已经存在的chunk //防止多个模块中出现重复的chunk default: { minSize: 0, minChunks: 2, reuseExistingChunk: true, name: 'utils' } // 只打包异步模块中的chunk 'async-vendors': { test: /[\\/]node_modules[\\/]/, minChunks: 2, chunks: 'async', name: 'async-vendors' } // 这里定义的是在分离前被引用过两次的文件,将其一同打包到common.js中,最小为30K common: { name: "common", minChunks: 2, minSize: 30000 }
4. webpack-dev-sever可参考的配置
// 开发环境设置本地服务器,实现热更新 devServer: { contentBase: path.resolve(__dirname, 'static'), // 提供给外部访问 host: '0.0.0.0', port: 8388, // 允许开发服务器访问本地服务器的包JSON文件,防止跨域 headers: { 'Access-Control-Allow-Origin': '*' }, // 设置热替换 hot: true, // 设置页面引入 inline: true }, // 文件输出配置 output: { // 设置路径,防止访问本地服务器相关资源时,被开发服务器认为是相对其的路径 publicPath: 'http://localhost:8188/dist/js/', }, // 插件配置 plugins: [ // 热更新替换 new webpack.HotModuleReplacementPlugin() ]
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具