webpack相关总结

客官°小女子只卖身不卖艺 2024-04-18 10:49 75阅读 0赞

## 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是动态分析，必须代码执行到才知道引用的什么模块。