Webpack经典题目 --- 精髓

1、webpack与grunt、gulp的不同？

webpack是模块打包器，grunt是任务运行工具,gulp是流式任务运行工具

webpack通过entry入口，识别模块依赖列表，通过loaders转换器转换模块，通过plugins监听，最后输出打包文件。

grunt和gulp通过run()转换文件。grunt未处理完的放.tmp/,两者处理完的放dest(本地磁盘)。

 

2、与webpack类似的工具还有哪些？

webpack 大型复杂前端站点构建

rollup 基础库打包 vue、react

parcel 简单实验性项目 低门槛快速看到效果 调试信息有限

 

3、有哪些常见的loader？他们是解决什么问题？

babel-loader 转换es6语法

jsx-loader 转换jsx

cache-loader 缓存 提升二次构建速度

auto-prefixer css前缀补全/预处理器

image-webpack-loader 图片压缩

thread-loader 多线程构建

file-loader 将文件输出到一个文件夹中，代码通过相对url引用输出内容

url-loader 与file-loader相似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去

source-map-loader 加载额外的source map文件，方便断点调试

style-loader 将css注入到js, 通过dom操作css

eslint-loader 通过eslint检查js代码

 

4、有哪些常见的plugin？他们是解决什么问题？

html-webpack-externals-plugin 分包 设置externals

dllPlugin dllReferencePlugin对mainfest.json引用 分包 预编译资源模块

happypack parralle-webpack 多线程构建

HardSourceWebpackPlugin 缓存 提升二次构建速度

SplitChunksPlugin CommonsChunkPlugin 公共资源分离

polyfill-service 动态polyfill 构建体积优化

speed-measure-webpack-plugin 文件耗时情况

webpack-bundle-analyze 文件打包体积

uglifyjs-webpack-plugin 多线程构建

define-plugin 定义环境变量

 

5、Loader和Plugin的不同？

loader是模块转换器，转换模块。加载解析非js文件。

plugin是webpack的拓展，构建过程中，webpack发布特定的广播，plugin监听，并会调用webpack内置的api，改变webpack的运行结果

 

6、webpack的构建流程是什么？从读取配置到输出文件这个过程尽量说全

1）初始化参数：合并配置文件和shell命令，形成最终参数

2）加载模块：使用上一步的参数配置complier对象，加载所需的plugin，执行对象的run方法

3）确定入口：找到entry的所有入口

4）编译模块：自动递归加载所有的模块，调用loader转换模块

5）完成模块编译：形成模块依赖树

6）输出资源：根据入口和模块的关系，形成一个个包含多个模块的chunk单独的文件，并加入输出列表（这是最后一次修改输出内容的步骤）

7）输出完成：根据输出路径和文件名，将打包好的内容写入到文件系统。

 

7、是否写过Loader和Plugin？描述一下编写loader或plugin的思路？

没有

 

8、webpack的热更新是如何做到的？说明其原理？

不知道

 

9、如何利用webpack来优化前端性能？（提高性能和体验）

构建速度优化

1、使用webpack4 

内核加速 for of代替 foreach  map、set代替object includes代替indexof

默认使用hash的md4算法

webpack4将AST传递给loader,而不会出现原来的双重解析问题。

使用字符串代替正则表达式

2、多线程构建

HappyPack、thread-loader、 parallel-webpack

uglifyjs-webpack-parallel开启parallel参数

3、分包

html-webpack-exteranals-plugin 使用externals

dllPlugin dllReferencePlugin对mainfest.json引用 预编译资源模块

4、缓存

HardSourceWebpackPlugin、cache loader

5、减少构建目标

babel-loader不构建node_modules

6、Scope Hositing

new Webpack.optimize.ModuleConcatenationPlugin()

7、Tree Shaking

.babelrc 配置 modules:false

8、公共资源分离

CommonsChunkPlugin SpitChunksPlugin

9、图片压缩

node的imagemin、tinypng的API

image-webpack-plugin

10、动态polyfill

polyfill-service

 

10、如何提高webpack的构建速度？

1、使用webpack4 

内核加速 for of代替 foreach  map、set代替object includes代替indexof

默认使用hash的md4算法

webpack4将AST传递给loader

使用字符串代替正则表达式

2、多线程构建

HappyPack、thread-loader、 parallel-webpack

uglifyjs-webpack-parallel开启parallel参数

3、分包

html-webpack-exteranals-plugin 使用externals

dllPlugin dllReferencePlugin对mainfest.json引用 预编译资源模块

4、缓存

HardSourceWebpackPlugin、cache loader

5、减少构建目标

babel-loader不构建node_modules

 

11、怎么配置单页应用？怎么配置多页应用？

单页应用可以理解为webpack的标准模式，直接在entry中指定单页应用的入口即可

多页引用可以使用webpack的AutoWebPlugin来完成简单自动化构建。

注意：提取公共代码，避免重复加载

入口配置灵活，避免每次添加新页面要修改构建配置

 

12、npm打包时需要注意哪些？如何利用webpack来更好的构建？

1、支持CommonJS模块化规范

2、打包最后结果应该是采用ES5编写。如果ES5是经过转换的，最好同SourceMap一同上传

3、尽可能小

4、不能将依赖模块一同打包。避免底层模块重复打包。

5、UI组件类的模块应该将依赖的其他资源文件包含在发布的模块里。

 

1、设置output.libraryTarget = 'commonjs2'

2、babel-loader转换， 开启devtool:'source-map'输出SourceMap以发布调试

3、修改.babelrc 加入transform-runtime插件

4、使用externals配置项告诉webpack哪些不需要打包

5、css-loader和extract-text-webpack-plugin

 

13、如何在vue项目中实现按需加载？

Vue UI组件库的按需加载 为了快速开发前端项目，经常会引入现成的UI组件库如ElementUI、iView等，但是他们的体积和他们所提供的的功能一样，是很庞大的。而通常情况下，我们仅仅需要少量的几个组件就足够了，但是我们却将庞大的组件库打包到我们的源码中，造成不必要的开销。

不过很多组件亏已经提供了现成的解决方案，如Element出品的babel-plugin-component和AntDesign出品的babel-plugin-import。安装以上插件后，在.babelrc配置中或babel-loader的参数中进行设置，即可实现组件按需加载了。

{

    "presets":[["es2015", { "modules": false}]],

    "plugins":[

        [

            "component",

            {

                "libraryName": "element-ui",

                "styleLibraryName": "theme-chalk"

            }

        ]

    ]

}

单页应用的按需加载 现在很多前端项目都是通过单页应用的方式开发的，但是随着业务的不断扩展，会面临一个严峻的问题--首次加载的代码量越来越多，影响用户的体验。

通过import(*)语句来控制加载时机，webpack内置了对于import(*)，会将import(*)中引入的模块作为一个新的入口在生成一个chunk。当代码执行到import(*)时，会去加载Chunk对于生成的文件。import()会返回一个Promise对象，所以为了让浏览器支持，需要实现注入Promise polyfill