Tagged: webpack

微前端：将微小的单体前端零碎拆分成多个独立的小型零碎，最初集成为一个零碎的架构思路，分而治之，让零碎更加容易保护、更易扩大，施行微前端是一个先拆分，后合并的过程。

tree shaking 是一个术语，通常用于形容移除 JavaScript 上下文中的未援用代码(dead-code)。它依赖于 ES2015 模块零碎中的动态构造个性，例如 import 和 export。最早由rollup实现。

我的项目中会依赖一些开源JS-SDK 因为革新源码export工作量比拟大 因而只能放在static在html用script标签援用，同时心愿这些源码文件参加压缩混同

原理：通过“不停轮询文件的批改工夫“，缓存一批更新 {代码…} 以上只是达到了热重载，要想热更新，须要配合webapck-dev-server和HotModuleReplacementPlugin实现。

1.babel-loader将 js 代码转换为低版本,来看看解释Babel 是一个工具链，次要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便可能运行在以后和旧版本的浏览器或其余环境中。

集成了 主动编译 和 主动刷新浏览器 等性能。webpack-dev-server 在编译之后不会写入到任何输入文件，而是将 bundle 文件保留在内存中，而后将它们 serve 到 server 中。

webpackwebpack 就是一个前端资源打包工具，它依据模块的依赖关系进行动态剖析，而后将这些模块依照指定的规定生成对应动态资源。根本应用在本地装置 webpack {代码…} 文件目录，创立 webpack.config.js 配置文件（在 webpack v4 中，能够毋庸任何配置，然而大多数我的项目会须要很简单的设置）。 {代码…} 运行打包命令 …

应用html-plugin-webpack时个别都会设置template属性配置html模板。 但这存在毛病: 在团队领有多个我的项目时, html格局的模板内容无奈做到通用性能的对立和针对特定我的项目的扩大。所以如果将模板内容的配置为js内容，获取js的齐全编码能力, 既能够封装团队中我的项目通用模板内容, 有保障较高的定制能力.

刚接触webpack时，应用webpack打包后只会生成一个被称为bundle的文件，在缓缓相熟webpack后，如果同时对于前端优化有肯定的理解，就会尝试将臃肿的bundle拆分成多个小文件并按需加载。

Tree-Shaking 是一种基于 ES Module 标准的 Dead Code Elimination 技术，它会在运行过程中动态剖析模块之间的导入导出，确定 ESM 模块中哪些导出值未曾其它模块应用，并将其删除，以此实现打包产物的优化。