webpack相关总结

webpack相关总结

1. 什么是webpack?它和grunt和gulp有什么不同？

Webpack是一个模块打包器，它可以递归的打包项目中的所有模块，最终生成几个打包后的文件。它和其它的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJS)、全局分析。

2. 什么是bundle？什么是chunk？什么是module?

bundle是由webpack打包出来的文件。chunk是指webpack在进行模块的依赖分析的时候，分割出来的代码块。module是开发中的单个模块。

3. 什么是Loader?什么是Plugin?

• loader是使webpack拥有加载和解析非js文件的能力。
• plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果。

4. webpack的构建流程？

• 初始化参数: 从配置文件和shell语句中将读到的参数合并，得到最后的参数。
• 开始编译：用合并得到的参数初始化complier对象，加载所有配置的插件，执行run方法开始编译。
• 确定入口：通过entry找到入口文件。
• 编译模块：从入口文件出发，调用所有配置的loader对模块进行解析翻译，再找到该模块依赖的模块进行处理。
• 完成模块编译：得到每个模块被翻译之后的最终内容和依赖关系。
• 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，再把每个chunk转换成一个单独的文件加载到输出列表。
• 输出完成：确定输出的路径和文件名，把内容写到文件系统中。

5.如何利用webpack来优化前端性能？

• 提取公共代码：webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替。
• 压缩代码：（development和production）
• 使用loader的时候，使用exclude排除node_modules中的文件。
• 配置extractTextWebpackPlugin插件。
• 使用TreeShaking插件：Tree-shaking 概念最早由Rollup.js 提出，后来在webpack2中被引入进来，但是这一特性能够被支持得益于ES6 静态化思想。ES6的模块声明相比于传统的CommonJS有着本质区别。这种modules设计保证了依赖关系是提前确定的，使得静态分析成为了可能，与运行时无关。（除那些引用的但却没有使用的代码）

6.配置问题:如何可以自动生成webpack配置？

webpack-cli /vue-cli /etc …脚手架工具

6.开发问题一：webpack-dev-server和http服务器如nginx有什么区别?

webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，它比传统的http服务对开发更加简单高效。

6.1 Nginx相关：

• 正向代理：客户端可以感知到代理的存在，客户端向代理发送了一个请求并且指定目标机器，然后代理向目标机器转移请求并将返回的内容移交给客户端。
  • 访问原本无法访问的服务器B。、VPN技术的应用
  • 代理服务器高带宽高，可以加速访问服务器
• 反向代理：客户端感知不到代理的存在，访问者并不知道自己访问的是一个代理。因为客户端不需要任何配置就可以访问。实际运行方式是以代理服务器来接受客户端的请求，然后将请求转发给内网上的服务器，并将从服务器上得到的结果返回给请求的客户端，此时代理服务器对外就表现为一台服务器。
  • 保证内网的安全，隐藏原始服务器
  • 负载均衡。反向代理多个服务器

7.开发问题二: 什么是模块热更新？

模块热更新是webpack的一个功能，它可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。

8. 优化问题一：什么是长缓存？在webpack中如何做到长缓存优化？

浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行缓存，但是每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output纵输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。通过NameModulesPlugin或是HashedModuleIdsPlugin保持再次打包文件名称不变。

9.优化问题二：什么是Tree-shaking?CSS可以Tree-shaking吗？

Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking
JS。Css需要使用Purify-CSS。

10.webpack3和webpack4的区别？

• mode/–mode参数
  新增了mode/–mode参数来表示是开发还是生产（development/production）
  production 侧重于打包后的文件大小，development侧重于构建速度。
• 移除loaders，必须使用rules（在3版本的时候loaders和rules 是共存的，但是到4版本的时候只允许使用rules)。
• 移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替。
• 支持es6的方式导入JSON文件，并且可以过滤无用的代码。

// 一、.babelrc 中添加
"presets": [
 [
   "es2015", {
     "modules": false,
   }
 ],
 "stage-2"
],
或者在babel loader中的options里面添加同样的代码, modules:false 表示的是不对ES6进行处理
// 二、使用uglifyjs-webpack-plugin
plugins: [
    new UglifyJsPlugin(),
...
]
想要代码配置tree-shaking,必须采用es6的模块语法，因为es6的模块采用的是静态分析，也就是从字面量对代码进行分析。之前的require是动态分析，必须代码执行到才知道引用的什么模块。