webpack游戏源码_webpack实战

文章目录：

• 1、能不能再在webpack-server看源码
• 2、webpack打包原理
• 3、webpack作者评价vite
• 4、webpack是为了解决什么问题
• 5、webpack打包时怎么避免打包jq源码这种
• 6、webpack打包过的代码怎么反编译回来？

能不能再在webpack-server看源码

类似下面这样就可以了，entry设置为对象 每个入口设置为属性，属性的值是一个数组，就可以像单入口一样往这个数组添加entry: { Profile: [ 'webpack-dev-server/client?', 'webpack/hot/only-dev-server', './profile.js'], Feed: [ 'webpack-dev-server/client?', 'webpack/hot/only-dev-server', './feed.js'] }

webpack打包原理

webpack打包原理是根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源，当 webpack 处理程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。

webpack有一个智能解析器，几乎可以处理任何第三方库。无论它们的模块形式是CommonJS、AMD还是普通的JS文件；甚至在加载依赖的时候，允许使用动态表require("、/templates/"+name+"、jade")。

扩展资料

在使用webpack构建的典型应用程序或站点中，有三种主要的代码类型：

1、团队编写的源码。

2、源码会依赖的任何第三方的library或"vendor"代码。

3、webpack的runtime和manifest，管理所有模块的交互。

runtime 包含：在模块交互时，连接模块所需的加载和解析逻辑；包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。

webpack作者评价vite

评价：Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生ES-Module的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 ”再也回不去 webpack 了“ 。

webpack缺点是缓慢的服务器启动

当冷启动开发服务器时，基于打包器的方式是在提供服务前去急切地抓取和构建你的整个应用。

vite改进

Vite 通过在一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间。

依赖大多为纯JavaScript并在开发时不会变动。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会以某些方式（例如 ESM 或者 CommonJS）被拆分到大量小模块中。

Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快10-100倍。

源码通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载。（例如基于路由拆分的代码模块）。

Vite以原生ESM方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。

webpack: 分析依赖= 编译打包= 交给本地服务器进行渲染。首先分析各个模块之间的依赖，然后进行打包，在启动webpack-dev-server，请求服务器时，直接显示打包结果。

webpack打包之后存在的问题：随着模块的增多，会造成打出的 bundle 体积过大，进而会造成热更新速度明显拖慢。

vite: 启动服务器= 请求模块时按需动态编译显示。是先启动开发服务器，请求某个模块时再对该模块进行实时编译，因为现代游览器本身支持ES-Module，所以会自动向依赖的Module发出请求。

所以vite就将开发环境下的模块文件作为浏览器的执行文件，而不是像webpack进行打包后交给本地服务器。

分析了webpack和vite的打包方式后，也就明白了为什么vite比webpack打包快，因为它在启动的时候不需要打包，所以不用分析模块与模块之间的依赖关系，不用进行编译。这种方式就类似于我们在使用某个UI框架的时候，可以对其进行按需加载。

热更新方面，效率更高。当改动了某个模块的时候，也只用让浏览器重新请求该模块，不需要像webpack那样将模块以及模块依赖的模块全部编译一次。

webpack是为了解决什么问题

配置入口没glob式需要额外处理 目录结构复杂file-loder面path功能太弱候自定义构建目录结构能放目录 源码比较复杂遇问题看源码要花间 没 babel webpack ES贰0依5+ 语接受提示用指定 loader意味着支持部 ES贰0依5 语 firefox 与 chrome 浏览器能直接跑代码用 webpack 编

webpack打包时怎么避免打包jq源码这种

确实，每次打包从入口开始，会parse所有的依赖，多的时候竟然打包一次要2秒多，简直不能忍。然而，有几个解决方案，最有效的，是使用weboack的watch，只有文件md5变化时，才会重新打包，并且只parse有变化的文件，其他没变化的文件是使用缓存的...

webpack打包过的代码怎么反编译回来？

JavaScript Document

function show(str)

{

var str1="td"+str;

var str="show"+str;

for (var i=1; i18; i++)

{

var obj = document.getElementById('show' + i.toString());

if (obj) obj.style.display = 'none';

}

document.getElementById(str).style.display="block";

}