Webpack

如果只是通过设置，重新缓存的间隔时间，是不好解决的： 设置时间过短----缓存带来的性能优化的效果就不明显了 设置时间过长----如果项目更新了，也不能及时缓存到最新的结果 此时，用哈希值给文件命名的

<1> css 文件的单独提取【MiniCssExtractPlugin】 注意： 如果 css 文件体积过小时，这样干反而会多此一举！！！ 配置插件： 配置加载器： <2> css 文件的压缩【op

<1> Why need Code Spliting ？ <2> Code Splitting 的两种方式： (1) 多入口打包 配置多入口、多出口： entry 多入口的配置，需要以对象的形式配置

<1> 两种环境 开发环境 注重开发效率 生产环境 注重运行效率 不同环境配置下的 webpack 配置： ---- 两种方式 配置文件根据环境不同导出不同配置 一个环境对应一个配置文件 <2> 生产

(1) 解决的问题： 自动刷新导致的页面状态丢失的问题。 (2) 使用方法： 在webpack.config.js中的配置 在 devServer 中开启 配置插件 ，该插件是 webpack 内置的

使用方法： 直接在 webpack.config.js 文件中进行配置！！配置devtool属性即可！！ 有许多种模式可以选择！ 不同模式的大概不同之处： 比较推荐的方式： 开发模式下： 生产模式下：

它实现了自动打包，并把打包后的文件部署到一个 http server【服务器】上 可以自动监听代码变化，代码变化会自动重新打包！！！ 注意： webpack-dev-server 实现的打包并不会输出

注意： 类中需要有 apply() 方法 栗子： emit生命周期钩子 我们需要实现一个插件，用来清除打包生成的 js 文件中的注释！！ 先分析适用的生命周期，因为是清除打包生成的 js 文件中的注释

一. clean-webpack-plugin 先引入： 再new调用使用： 二. html-webpack-plugin 1. 可以指定生成的 html 文件的头部标签内容 2. 可以自己创建一个

注意： webpack 中对同一个资源可以依次使用多个 loader【管道概念】 <1> 开发一个转译 .md 类型资源的 loader 两种方法： 在该 loader 中直接完成 md --> ht

(1) file-loader 但需要注意一点： 记得把图片资源的请求地址统一起来。需要进行相关配置如下： 原理如下 (2) url-loader dataUrl 的格式： 栗子： webpack内部

<1> 浏览器环境 <2> node 环境 (1) 在node 环境使用 ES Module 直接在终端用 node --experimental-modules index.mjs 即可在 node

一. ES Module ES Module的一些子规定： ES Module 默认采用严格模式，use strict ES Module 都是运行在单独的私有作用域中 ES Modula 是通过 C

一. 模块化的演变过程 <1> 文件划分 缺点： 污染全局作用域，可以任意修改模块中的代码内容，没有私有空间 有命名冲突问题 无法管理模块依赖关系 <2> 命名空间方式 缺点： 模块中的内容依旧可以被

1 . BannerWebpackPlugin 2 . CleanWebpaPlugin 3 . AnalyzeWebpackPlugin 4 . InlineChunkWebpackPlugin 补

1 . Plugin 的作用： 2 . Plugin 工作原理 Webpack 在编译代码的过程中，会触发一系列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是

1 . clean-log-loader 2 . banner-loader loader的配置 options： 如下： 为schema规则的配置 在 schema.json 文件中： 第一行：表示

1 . loader 执行顺序 1 . 1 优先级分类： pre：前置 loader normal：普通 loader inline：内联 loader post：后置 loader 1 . 2 执行

主要从四个方面进行了代码优化： 提升开发体验 提升打包构建速度 减少代码体积 优化代码运行性能 ！！

1 . Why？ 2 . 是什么？ 3 . How? 下载插件 引入并配置 在 main.js 里面进行注册 下载部署静态资源服务器的库 serve npm i serve -g 执行命令 serve