webpack

Posted 2021-04-29 唯一Smile

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到javascript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

webpack打包原理

把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。

webpack的优势

（1） webpack 是以 commonJS 的形式来书写脚本的，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

（2）能被模块化的不仅仅是 JS 了。

（3） 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。

（4）扩展性强，插件机制完善

什么是webpack和grunt和gulp有什么不同？

webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。它和其他工具最大的不同在于它支持code-splitting(代码分割)、模块化(AMD,ESM,CommonJS)开发、全局分析(他会分析整个项目下跟你应用有关的模块)。

什么是loader、plugin?

loader用于加载某些资源文件。因为webpack本身只能打包common.js规范的js文件，对于其他资源如css，img等，是没有办法加载的，这时就需要对应的loader将资源转化，从而进行加载。

plugin用于扩展webpack的功能。不同于loader，plugin的功能更加丰富，比如压缩打包，优化，不只局限于资源的加载。

什么是bundle,chunk,module？

bundle：是由webpack打包出来的文件

chunk：是指webpack在进行模块依赖分析的时候，代码分割出来的代码块

module：是开发中的单个模块

Webpack的主要优势：

① 模块化开发（import，require）② 预处理（Less，Sass，ES6，TypeScript……）③ 主流框架脚手架支持（Vue，React，Angular）④ 庞大的社区（资源丰富，降低学习成本）

谈谈你对webpack的看法

WebPack 是一个模块打包工具，使用WebPack可以管理模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的html、Javascript、CSS以及各种静态文件(图片、字体等)，让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。

webpack 和 gulp 的区别？

webpack是一个模块打包器，强调的是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源都看成是模块，通过loader和plugin对资源进行处理。

gulp是一个前端自动化构建工具，强调的是前端开发的工作流程，可以通过配置一系列的task，第一task处理的事情（如代码压缩，合并，编译以及浏览器实时更新等）。然后定义这些执行顺序，来让glup执行这些task，从而构建项目的整个开发流程。自动化构建工具并不能把所有的模块打包到一起，也不能构建不同模块之间的依赖关系。

webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：

1. 对 CommonJS 、 AMD 、ES6的语法做了兼容。

2. 对js、css、图片等资源文件都支持打包。

3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持。

4. 有独立的配置文件webpack.config.js。

5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间。

6. 支持 SourceUrls 和 SourceMaps，易于调试。

7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活

8. 8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快。

如何自动生成webpack配置?

webpack-cli/vue-cli

webpack-dev-server和http服务器如nginx有什么区别？

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

什么是模热更新？有什么优点？*

模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。在应用过程中替换添加删出模块，无需重新加载整个页面，是高级版的自动刷新浏览器。

优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式

什么是长缓存？

浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。

在webpack中，可以在output给出输出的文件制定chunkhash，并且分离经常更新的代码和框架代码，通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变。

什么是tree-shaking? css可以tree－shaking吗？

指打包中去除那些引入了但在代码中没用到的死代码。在wepack中js treeshaking通过UglifyJsPlugin来进行，css中通过purify-CSS来进行.