前端面试题整理——webpack相关考点-唐朝资源网

它是一个开发工具。面试考点重在配置和使用，原理理解不需要太深。

一、基本配置

1、拆分配置和合并

从 dev 和 prod 配置中拆分公共配置，然后使用 -merge 合并配置。

2、启动本地服务

dev 环境启动配置。

3、处理 ES6

使用babel-对对应目录的js进行代码转换。

4、处理方式

使用-、css-、style-等，这里有一个测试点，执行顺序是从后往前。

5、处理图片

在 dev 环境中，file- 用于直接引用图片，prod 环境将使用 url- 对小图片进行编码。

6、模块化

天生就支持模块化。

二、高级配置

1、配置多个条目

入口建立多入口文件，在输出文件中使用[name]根据入口的key动态生成输出文件名

设置多个，根据多个entry生成多个html文件，同时设置导入对应的entry文件。如果不设置，将导入所有入口文件。

2、每次打包时清除原dist文件

使用new()时，默认清空.path指定的文件夹内容。

3、解压css文件

mini-css–用这个插件的loder替换style-。

在里面配置mini-css–，用来设置要存放的css的具体目录和名称。

使用 add– 和 -css– 插件来压缩提取的 CSS。

4、提取公共代码

用过的

optimization:{ splitChunks:{ chunks: 'all', // 缓存分组 cacheGroups:{ //第三方模块 vendor:{ name:'vendor', // chunk 名称 priority:1, // 权限最高，优先抽离，重要！！ test:/node_modules/, // 匹配目录规则 minSize:0, // 大小限制 minChunks:1, // 最少复用过几次

图片[1]-前端面试题整理——webpack相关考点-唐朝资源网

} //公共模块 common:{ name:'common', // chunk 名称 priority:0, // 优先级 minSize:0, // 公共模块的大小限制 minChunks:2, // 公共模块最少复用过几次 } } } }

5、异步加载js

该语法固有地支持异步加载。

异步加载会产生单独的块。

6、处理 JSX

安装和配置@babel/-react。

7、处理 VUE 文件

安装和配置 vue-

三、优化构建速度

1、优化 babel-（生产就绪）

{
  test: /.js$/,
  use: ['babel-loader?cacheDirectory'], // 开启缓存
  include: path.resolve(__dirname, 'src'), // 明确范围
  // 排除范围，include 和 exclude 两者选一个即可
  // exclude: path.resolve(__dirname, 'node_modules')
}

开启缓存后，如果es6没有变化，缓存不会重新编译。

设置使用范围可以减少编译量

2、（可用于生产）

忽略匹配js的正则表达式

3、（可用于生产）

不解析正则匹配库的依赖

4、（可用于生产）

JS 是单线程的，使用多进程打包来提高构建速度，尤其是对于多核 CPU。

5、（仅限生产）

内置工具压缩JS，实现JS的多进程压缩。原理是一样的。

图片[2]-前端面试题整理——webpack相关考点-唐朝资源网

new ParallelUglifyPlugin({
  // 传递给UglifyJS的参数，值不过开启了多进程压缩
  uglifyJS:{
    output:{
      beautify:false, // 最紧凑的输出
      comments:false, // 删除所有注释
    },
    compress:{
      // 删除所有的 console 语句，可以兼容ie
      drop_console: true,
      // 内嵌定义了但是只用到一次的变量
      collapse_vars: true,
      // 提取出出现多次但是没有定义成变量去引用的静态值
      reduce_vars: true,
    }
  }
})

关于开启多进程按需使用，

项目大，打包速度慢，启用多进程提高速度

项目小，打包速度快，打开多个进程会降低速度

6、自动刷新（不适用于生产）

{
watch:true, // 开启监听，默认 false
// 注意，开启监听之后，webpack-dev-server 会自动开启刷新浏览器
// 监听配置
watchOptions:{
  ignored: /node_modules/, // 忽略内容
  // 监听到变化发生后等300ms再去执行动作，防止文件更新太快导致重新编译频率太高
  aggregateTimeout:300, // 默认为300ms
  // 判断文件是否发生变化时通过不停的去询问系统指定文件有没变化实现的
  poll:1000, // 默认每隔1000ms询问一次
}
}

上面的配置一般不为开发配置，因为开启-dev-会自动带来自动刷新的配置。上面的配置是为了了解自动刷新有什么。

7、热更新（不适用于生产）

自动刷新：整个网页刷新，速度慢，状态会丢失

图片[3]-前端面试题整理——webpack相关考点-唐朝资源网

热更新：新代码生效，网页不刷新，状态不丢失

使用插件热更新：

在入口入口添加两行配置：

entry:{
  index:[
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/dev-server',
    path.join(srcPath,'index.js')
  ]
}

然后使用中的插件。

最后，添加一个属性：hot:true 来启用热更新。

配置热更新后，需要添加需要热更新的模块的逻辑代码，如下

if(module.hot){
  moudule.hot.accept(['./math'],()=>{
    // 热更新模块里面的回调函数
  })
}

8、动态链接库（不可用于生产）

使用先决条件：

vue 和 react 等前端框架体积庞大，构建速度慢，相对稳定，很少升级。

同一版本只能构建一次，无需每次都重新构建。

支持是内置的。

使用过程：

首先打包dll文件

重用dll文件

四、优化输出代码

优化方向：体积更小、封装合理、不重复加载、速度更快、内存占用更少

1、小图编码

2、添加哈希

3、延迟加载

4、提取公共代码

5、

6、使用CDN加速：

在设置中，所有的js和css文件都会被修改添加cdn前缀

在url-中可以修改图片的cdn前缀

图片[4]-前端面试题整理——webpack相关考点-唐朝资源网

7、使用

开放模式和对比模式的区别：

(1）自动开启代码压缩

（2）Vue React等会自动删除调试代码（如开发环境）

（3）自动启动Tree-，必须用ES6的tree-才能生效，不行

ES6 静态导入，编译时导入

动态导入，执行时导入

静态分析只能通过静态引入来执行，而 Tree-

8、范围

打开后将多个参考文件合并为一个函数，缩小函数范围，代码体积更小，代码可读性更好

如何配置：

参考插件插件，使用插件打开。

对于 npm 中的第三方模块，最好使用 main 中指向的 ES6 模块化语法文件

resolve:{
  mainFields: ['jsnext:main','brower','main']
}

五、巴别塔

基本配置：.file

它是一个写如何翻译语法的插件，它是一个集成了多个插件的包。

{
"presets":[
  ["@babel/preset-env"]
],
"plugins":[]
}

babel-：兼容低版本浏览器，重写了低版本没有的新语法。

core-js 和两个库可以满足大部分新语法，babel-是前两个库的集合。

babel 7.4 已经弃用 babel-，推荐使用 core-js 和 .

直接使用的缺点是覆盖全局方法会污染全局环境。

通天 – ：

使用配置，可以让被覆盖的方法不污染全局环境，相当于重命名方法，代码也是自动替换成新名称的方法。

面试问题：

1、为什么要构建和打包前端代码？

代码级别：

(1）更小的尺寸（树，压缩，合并），更快的加载

图片[5]-前端面试题整理——webpack相关考点-唐朝资源网

（2）编辑高级语言或语法（TS、ES6+、模块化、scss）

(3）兼容性和错误检查(,,)

研发流程：

(1）系统一、高效的开发环境

(2）统一的构建过程和输出标准

（3）综合公司建设规范（测试、上线等）

2、块是什么意思，有什么区别？

– 每个源文件，里面的一切都是一个模块

chunk – 多个模块的组合，例如 entry()

– 最终输出文件

3、和之间的区别？

模块转换器，例如less to css。列举一些常用的

扩展，例如。列举一些常用的

4、babel 和 ? 的区别

Babel 是一个新的 JS 语法编译工具，与模块化无关

是一个打包的构建工具，集合了多个

5、如何生成一个lib

output:{
  // lib的文件名
  filename: 'lodash.js',
  // 输出 lib 到dist 目录下
  path: distPath,
  // lib 的全局变量名
  library: 'lodash'
}

6、如何实现延迟加载？

() 语法实现

结合Vue React异步组件，结合Vue-React-异步加载路由简单说一下。

7、常见的性能优化？

根据上述三、优化内容的实际效果

8、babel- 和 babel- 的区别？

babel – 会污染全球

babel – 不污染全局

要生成第三方库，请使用 babel-

9、为什么不能使用代理？

类可以用来模拟，可以用来模拟

但是使用了Proxy的功能。无法模拟

本站下载的源码均来自公开网络收集转发二次开发而来，若侵犯了您的合法权益，请来信通知我们1413333033@qq.com，我们会及时删除，给您带来的不便，我们深表歉意。下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，访问及下载者下载默认同意本站声明的免责申明，请合理使用切勿商用。

THE END