蛇皮鸡

区分环境配置 之前有再webpack-config.js中写mode这个参数，但是发现其实这个mode可以被改变，比如： 这个优先级最高，其次是webpack.config.js，最后才是默认的pro

代码调试之SourceMap source map 背景和原理 为了保证上线程序安全，我们需要对程序进行打包和压缩，但是这也带来一个问题，就是混淆之后的代码难以阅读和调试，那怎么办？ 我们急需一个功能

依赖图 和 依赖清单 依赖图（Dependency Graph） Dependency Graph 插件webpack-bundle-analyzer可以支持：对从入口文件开始解析所有依赖，递归的生成

WebWorker 之前博客有讲到，WebWorker是干什么的，然后怎么做，这里就不洗将了，主要说明webpack能对webworker如何进行打包： 当执行如下代码的时候，webpack不需配置，

全局导出和全局导入 Modular Progress 模块化编程：Modules 简单列举一下，webpack直接支持的模块化： ECMAScript（简称ES Module） AMD CommonJ

外部扩展 和 预置依赖 External 外部扩展 当你需要在html模板文件直接引入一个JS文件的时候，但是你有希望在src源码文件可以通过import的方式引入改文件的内容，比如：jquery 假

打包js资源 前面说webpack内置js的翻译loader，但是这个翻译只有模块化的功能，无法提供代码向低版本编译： babel-loader Polyfill 向下兼容浏览器 方案 优点 缺点 b

打包数据资源 数据资源其实说到底就是把该文件转换为数据（吐给JS），能够操作的，这明显和webpack5的Asset Module不符合，聪明的你肯定想到了使用对应的loader 自定义数据toml/

打包资产模块 raw-loader 打包文件，输出文本 file-loader 打包文件，输出文件 url-loader 打包文件，输出文件DataURL 以上上过loader经常的出现在webpac