前端面试题[webpack打包]

最新推荐文章于 2024-05-17 14:32:46 发布

独爱那杯cc

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量144

点赞数 4

分类专栏：前端面试题文章标签：前端 webpack node.js javascript

本文链接：https://blog.csdn.net/ym_010530/article/details/133047187

版权

前端面试题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

webpack

webpack打包器的理解：

将多个文件打包成一个文件，减少http的资源请求
将文件进行压缩、混淆打包，缩小了文件体积
处理兼容：

js：借助babel，将高级的js语法处理为低级的js语法，从而达到兼容的处理

css：借助postcss，Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。

可以利用webpack搭建脚手架工程化项目
webpack还可以在打包的时候对项目进行优化

loader/plugin/babel的区别

loader: 解析非js文件

plugin: webpack的插件,增强webpack的功能

babel: 语法降级,使浏览器进行兼容

项目中配置babel

安装需要的包
在项目中通过.babelrc或babel.config.js进行配置
preset: 预设,转换的语法 es6 => es5
env: 根据环境进行配置

development
production
test

plugins: 插件,例如移除console的插件应该在production环境中使用

webpack打包优化

soucemap,将打包压缩后的文件进行映射,从而可以让项目出现问题,精确的定位到开发代码的哪一行,但是会产生很多的map文件,所以生产阶段需要关闭: productionSourceMap: false
splitChunks:将公共代码进行提取，webpack在打包时，，如果某一个文件在很多文件中使用会被重复打包:

通过chunks进行提取方式的配置

- all：不管同步还是异步都提取一个文件
- initial：同步使用了，异步也使用了，提取两次
- async：只提取异步加载的模块

cacheGroups：配置提取方案

- name：生成的名字
- test：匹配的路径或资源名称
- chunks：单独进行chunks
- priority：优先级，数越大，优先级越高
- reuseExistingChunk：如果要提取的模块已存在直接复用
- minChunks：最小引用次数

vue-cli3默认开启prefetch，在加载首页的时候，就会提前获取用户可能访问的内容，提前加载其他路由模，所以我们要关闭该功能

这里要注意：不会影响首屏的加载速度，实际是为了优化子页面，可以快速打开子页面，但是像移动端，用户可能只会访问首页，也预加载其他模块的资源，浪费用户流量

config.plugins.delete('prefetch')

打包成gzip,可以进行资源请求的时候速度更快,通过compression-webpack-plugin将文件打包成压缩包在chainwebpack中配置,可以通过配置项修改打包的阀值,文件名\其他配置的,需要服务器nginx配置
runtimeChunk:运行时chunk,异步加载的代码,如果不开启,运行时代码或者代码没有发生变化,项目重新打包,此时我们的主模块会进行重新打包,的hash会发生变化(app.sdfjkad123(hash).js),项目部署后,会导致强缓存失效;开启runtimeChunk,会将运行时代码信息单独的存放到runtime.h12h3.js文件中,此时我们的主模块代码没有发生变化,或者运行时代码发生变化,都不会影响到主模块,所以主模块不会重新更新,主模块可以继续使用本地缓存;但是还需要配合script-ext-html-webpacl-plugin,将runtimeChunk代码生成到行内,如果是一个单独的文件,多发起一次请求
通过image-webpack-loader进行图片的打包压缩
开启路由懒加载将每个路由进行单独打包
借助externals可以进行忽略打包，转为cdn资源方式引入，从而提高用户访问资源的速度

自己搭建脚手架

初始化项目的基本目录和package.json文件
安装webpack webpack-cli包
默认会查找到src/index.js文件进行打包,最终输出dist内部index.js
查找入口之前,加载webpack.config.js

- 打包的入口: input
- 打包的出口: output

配置babel: webapck默认只能处理低级的js文件,利用babel进行降级

- 下载预设和插件
- babel.config.js进行配置: plugins: 用于配置插件,preset: 用于配置预设

配置loader: 解析三方文件(css/less/scss/png/jpg/vue..)通过loader进行解析

- 下载loader css-loader/less-loader/vue-loader
- 在webpack的config.js文件中的moudle/rules节点进行配置,通过test匹配后缀文件,{test: /\.css/, loader: ['css-loader']}

plugin插件: html-webpack-plugin, 可以打包html文件,并且会自动引入打包的js文件

- 在webpack.config.js文件中引入插件
- 将插件放入到: webpack.config.js中plugins: []数组中, 一般插件都是构造函数,在new的时候通过参数对象进行配置
- mini-css-extract-plugin: 用于抽离css文件

import HtmlWebpackPlugin from 'html-webpack-plugin'

module.exports = {
  plugins: [new HtmlWebpackPlugin({
    template: '/public/index.html',
    filename: 'index.html'
  })]
}