皮蛋很白的博客

输出文件名Hash substitutions一般部署前端的资源文件时，都会启用服务器的静态资源缓存。这样用户的客户端就可以缓存应用的静态资源，后续就不再需要重复请求服务器获取静态资源文件。从而整体提上了应用的响应速度。不过开启服务器的静态资源缓存也有一些需要注意的地方：如果在缓存策略中设置的失效时间过短，效果就不会特别明显。如果设置的比较长，一旦这个应用发生了更新，重新部署过后，就没有办法及时更新到客户端。为了解决这个问题，建议在生产环境中，在输出的文件名中添加哈希值(Hash)。一旦资源

MiniCssExtractPlugin 提取 CSS 到单个文件目前示例中webpack使用css方式：css-loader：将js中的css内容解析style-loader：最终将css样式通过<style>标签方式注入到页面中。CSS内容还是存储在JS文件中。MiniCssExtractPlugin 插件可以将CSS内容从打包结果中提取出来，存放到文件中。通过这个插件，就可以实现CSS模块的按需加载。因为提取后生成了css文件，所以就不需要<style>标签，

Code Splitting 代码分包 / 代码分割webpack默认打包依然存在一些弊端。就是所有代码最终都会被打包到一起（一个bundle文件中）。如果项目中代码比较复杂，模块比较多，打包结果就会很大（bundle体积过大），很容易超过2、3MB。而实际情况是，项目启动时，并不是每个模块都需要加载进来。但是这些模块又被全部打包到一起，需要任何一个模块都必须整体加载进来后才能使用。项目运行在浏览器端，这样就会浪费掉很多的流量和带宽。更为合理的方案，就是「分包」「按需加载」分包：将打包结果

sideEffects 副作用webpack4新增的功能。允许通过配置的方式去标识代码是否有副作用，从而为 Tree Shaking 提供更多的压缩空间。sideEffects 一般用于开发npm模块时，标记是否有副作用。官方文档中讲它和 Tree Shaking 放在一起讲，所以容易误解为它们是因果关系，实际上二者没什么关系。副作用副作用：模块执行时除了导出成员之外所作的事情。例如一个模块中定义了其他内容：export default () => { console.log('本

Optimization webpack 内部优化配置webpack配置文件中的 optimization 属性，用于集中去配置webapck内部的一些优化功能。Tree Shaking 摇树字面意思就是伴随着摇树的动作，树上的枯树枝和树叶就会掉落下来。web开发术语 Tree Shaking 也是相同的道理，它表示「摇掉」代码中未引用的部分（未引用代码dead-code）。MDN：Tree shaking 通常用于描述移除Javascript上下文中的为引用代码(dead-code)的行为。

生产环境优化开发环境注重开发效率，生产环境注重运行效率。开发环境所使用的soucre map和HMR等webpack特性会 生成 或 向打包文件中添加 一些生产环境用不到的内容。针对这个问题，webpack4推出了 模式(mode) 。它提供了不同模式下的预设配置。其中 production 模式内部开启了很多通用的优化功能。同时，webpack也建议开发者为不同的工作环境创建不同的配置。不同环境下的配置方式1：配置文件根据环境不同，导出不同的配置（中小型项目）webpack配置文件可以导

webpack 开发体验webpack 增强开发体验原始开发方式：编写源代码webpack打包运行应用刷新浏览器设想理想的开发环境：以HTTP Server运行不是以文件形式预览接近生产环境的状态类似ajax这类api，不支持文件访问形式自动编译 + 自动刷新提供Source Map支持调试错误时快速定位实现自动编译watch监听模式：监听文件变化，自动重新运行打包任务。（类似其他构建工具的watch）命令行使用方法：--watch参数启动监听模式例

Plugin 插件机制webpack 插件机制目的：增强webpack项目自动化能力。Loader 专注实现 资源模块的加载，从而实现整体项目的打包。Plugin 解决项目中 除了资源加载以外 的自动化工作。例如在打包之前，自动清除dist目录拷贝不需要参与打包的资源文件到输出目录压缩打包结果输出的代码webpack + Plugin 实现了大多前端 工程化 的工作，也是很多开发者理解为 webpack就是前端工程化 的原因。webpack 常用插件clean-webpackl-

loader资源模块加载器webpack 资源模块加载webpack内部(内部loader)默认只会处理javascript文件，也就是说它会把打包过程中所有遇到的文件当作javascript文件去解析。可以为其他类型的文件添加不同的加载器(loader)。loaderloader是webpack实现整个前端模块化的核心，借助于loader就可以加载任何类型的资源。安装loader，然后在配置文件中的module属性下配置rules数组。rules 是针对其他资源模块的加载规则的配置。每个规

webpack 快速介绍背景：nodev12.10.0 +webpack4 + yarnwebpack 快速上手安装依赖 yarn add webpack webpack-cli --dev执行命令yarn webpack会默认从src/index.js开始打包，并将文件默认输出为dist目录下的main.js文件webpack 配置文件webpack 4 以后的版本支持零配置的方式直接启动打包。整个打包过程会按照约定，默认将src/index.js作为打包入口，最终打包结果会存放在dist

介绍Babel用于将ES6+转换为ES5。Babel本身不具有任何转换功能，它把转换的功能分解到一个个插件中。如果不配置插件，使用babel命令转换的代码并没有什么变化。Babel转换ES6或其他规范可能需要十几二十个插件，为了使开发者不需要一个个添加安装配置，Babel提供了几组插件的集合，称为预设(preset)。开发者可以直接使用预设。例如推荐的预设 env(@babel/prese...

环境项目一般要配置两个环境：开发环境 development ：配置侧重于实时重载、模块热替换HMR、便捷的source map等，在本地搭建服务器运行。生产环境 production ：配置侧重于文件压缩、轻量的source map、其他发布配置等，打包上传到服务器运行。遵循逻辑分离，通常建议为每个环境编辑彼此独立的webpack配置。遵循不重复原则，我们还要保留一个“通用”的配置。...

主要解决下面几个问题：去重：当一个模块被多个入口使用时，每个入口打包后的文件都会包含这个模块的代码。长缓存：一个不会经常改动的模块，例如第三方库(vendor)，可以单独生成减少客户端重复加载。懒加载：当对一个模块懒加载，webpack会将这个模块作为一个...

介绍插件html-webpack-plugin实现打包时生成html文件，自动引入打包的资源并可以插入hash。还可以指定模板，默认lodash模板。创建初始项目// package.json{ // ... "scripts": { "build": "webpack --progress", "server": "node server.js" }, ...

每次要编译代码时，手动运行 npm run build 就会变得很麻烦。webpack 中有几个不同的方式，可以在代码发生变化后自动编译代码：webpack’s Watch Mode 观察模式webpack-dev-serverwebpack-dev-middleware...

前序nodejs版本：10.15.1webpack学习版本：4.43.0在项目中初始化了package.json学习中，依赖安装全部使用的 -d[–save-dev]npm init -y概念webpack 是一个 JavaScript 应用程序的 静态模块 打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个 依赖关系图 (depend...