webpack笔记总结

迈不过友情╰ 2021-09-18 03:48 276阅读 0赞

指定输入和输出文件后，lodash 生成bundle文件  
loader可以 import的 css等文件编译成webpack能识别的js文件  
HtmlWebpackPlugin插件可以 把分离的bundle文件自动插入 index.html入口文件中  
clean-webpack-plugin 先把dist下的所有文件先清空，在执行代码生成  
Manifest 记录着文件依赖和生成的追踪过程  
devtool不同类型的source map可以追踪错误代码的位置和优化打包速度  
webpack-dev-server指定访问目录dist后，能够实时重新加载 live reloading  
HMR，热模块启动，webpack 内部插件，new webpack.HotModuleReplacementPlugin()  
tree shaking，用于描述移除 JavaScript 上下文中的未引用代码(dead-code)，sideEffects指定文件后，代码构建生成时可以删除未被引用的方法函数等  
代码压缩输出，"mode" 配置选项轻松切换到压缩输出，只需设置为 "production"或者使用UglifyJsPlugin 插件（一般在生产环境使用）  
webpack-merge 可以合并公共配置文件（webpack.common.js）和不同环境下（webpack.dev.js，webpack.prod.js）的配置  
process.env.NODE\_ENV可以获得当前环境变量，用于判断  
入口 chunks 之间包含重复的模块时可以用CommonsChunkPlugin 插件来移除重复的模块  
CommonsChunkPlugin 插件将 lodash 分离到单独的 chunk，并且将其从 main bundle 中移除，减轻了大小  
CommonsChunkPlugin 能够在每次修改后的构建结果中，将 webpack 的样板(boilerplate)和 manifest 提取出来  
CommonsChunkPlugin 将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中  
使用 HashedModuleIdsPlugin，推荐用于生产环境构建，可以有助于资源缓存，优化性能

发表评论取消回复

表情：

评论列表（有 0 条评论，276人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack总结

-------------------- 文章目录 webpack 装载器loader 插件plugin 代理热加载多页面处理

短命女/ 2022年10月30日 06:29/ 0 赞/ 135 阅读

相关 webpack总结三

故心故心故心故心小故冲啊 -------------------- 文章目录前面全局变量图片处理(三种方式)

迈不过友情╰/ 2022年10月30日 06:28/ 0 赞/ 138 阅读

相关 webpack总结一

故心故心故心故心小故冲啊 -------------------- 文章目录 webpack与vuecli关系为什么要打包？

梦里梦外;/ 2022年10月30日 06:27/ 0 赞/ 147 阅读

相关 webpack学习总结

webpack 性能优化开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度 HMR – 一个模块发

左手的ㄟ右手/ 2022年10月10日 09:47/ 0 赞/ 138 阅读

相关 webpack3总结笔记

webpack 是前端开发者一个跨不过去的编译工具。不过由于他的快速迭代，让很多同学在学一个版本的时候，下一个新版本就发布了，让人感觉非常蛋疼和无奈： “我是谁，我在干嘛，我

本是古典何须时尚/ 2022年06月02日 03:51/ 0 赞/ 196 阅读

相关 webpack笔记

webpack笔记参考自： 1. [WebPack 简明学习教程][WebPack] 2. [webpack之傻瓜式教程及前端自动化入门][webpack]

叁歲伎倆/ 2022年05月17日 01:58/ 0 赞/ 137 阅读

相关 webpack笔记

WebPack可以看做是模块打包机：分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打

超、凢脫俗/ 2022年04月16日 01:24/ 0 赞/ 175 阅读

相关 webpack笔记

sourcemap配置源码映射会单独生成一个sourcemap文件 devtool:'source-map' 增加映射文件,可以帮我们调试源代码 dev

柔光的暖阳◎/ 2022年03月14日 10:56/ 0 赞/ 165 阅读

相关 webpack笔记

sourcemap配置源码映射会单独生成一个sourcemap文件 devtool:'source-map' 增加映射文件,可以帮我们调试源代码 dev

小灰灰/ 2022年01月19日 05:09/ 0 赞/ 193 阅读

相关 webpack笔记总结

指定输入和输出文件后，lodash 生成bundle文件 loader可以 import的 css等文件编译成webpack能识别的js文件 HtmlWebpackPl

迈不过友情╰/ 2021年09月18日 03:48/ 0 赞/ 277 阅读