【前端vue面试】webpack

拆分配置

一般情况下，配置分成3个文件；

• webpack.common.js 用于公共的配置；
• webpack.dev.js 用于开发环境的配置；
• webpack.prod.js 用于生产环境的配置。

引入webpack-merge，开发环境和生产环境要merge上公共配置

跨域代理

在webpack下，怎么跨域请求其它的接口？

面试常问
比如说前端的端口是8080，服务端如果端口是3000，这样前端在请求时如果直接请求3000会导致跨域请求不到，这时候可以使用proxy代理。

处理ES6（babel-loader）

需要配置.bebelrc

处理样式

postcss-loader，是处理css浏览器兼容性的
less-loader
css-loader
style-loader

使用postcss-loader时，需要配置postcss.config.js

处理图片（file-loader）

开发环境中

生产环境中

多入口

在公共配置中的entry配置多个入口

抽离css文件

抽离css文件后，css样式是以外部链接文件的形式引入的

不抽离css时，css会放到<style>中

线上打包，必须抽离CSS文件

抽离公共代码和第三方代码

两个文件引入了同一个模块，会打包两次

第三方模块

lodash文件较大
每次修改业务代码时，lodash都要重新打包，但是lodash并没有改变根本不需要重新打包
应该把lodash拆出去单独打包，当业务代码改变时，loadsh会命中缓存，加载会快

chunks & 缓存分租

可以设置minSize来限制多大的第三方模块单独打包
如果文件非常小，可以不抽离，直接和业务代码一起打包

minChunks: 2 // 公共模块最少复用过几次
比如公共模块至少复用了2次，就把它抽离出来单独打包，比如math

懒加载

懒加载也会产生一个chunk

处理JSX

@babel/preset-react

处理vue

vue-loader

module chunk bundle 的区别

1. module-各个源码文件，webpack中一切皆模块
   （能被引入的文件都是模块，不管是什么类型，比如css js 图片）
2. chunk-多模块合并成的，如entry、import() 、splitChunk都可以生成chunk
3. bundle-最终的输出文件
   

优化构建速度

优化babel-loader

开启缓存: 用cacheDirectory，只要ES6代码没变，就不会重新编译，会缓存下来
第二次编译时，没改的部分使用缓存

IngorePlugin

1. 用IngorePlugin忽略无用文件
   例如：moment会支持多语言，如何只引入中文模块？
   // 忽略 moment 下的 /locale目录
   new webpack.IgnorePlugin(/./locale/, /moment/)

// 业务代码中动态引入语言包
import ‘moment/locale/zh-cn’

2. noParse避免重复打包
   module: {
   noParse: [/react.min.js$/]
   }

区别：IgnorePlugin直接不引入，代码中没有
noParse(类似vue.min.js已经模块化处理过)引入，但不打包

happypack

1.js单线程，开启多进程打包
2.提高构建 进度

// 步骤1 module.rules下-将对.js的文件交给id为label的HappyPack实例
{
test: /.js$/,
use: [‘happypack/loader?id=babel’]
}

// 步骤2 happyPack开启多进程打包
new HappyPack({
id: ‘babel’,
loaders: [‘babel-loader?cacheDirectory’]
})

ParallelUglify多进程压缩JS

1. webpack内置Uglify工具压缩JS
2. JS 单线程，开启多进程压缩更快
3. 和happyPack同理
   在开发环境下使用压缩
   
4. 项目较大，打包较慢，开启多进程能提高速度
5. 项目较小，打包很快，开启多进程会降低速度（进程开销）
6. 按需使用

热更新

1. 自动刷新：整个网页都刷新,速度较慢
2. 自动刷新：状态会丢失(表单内数据会丢失)
3. 热更新：新代码生效，网页不刷新，状态不丢失

热更新配置

自己配置哪些模块需要热更新

适用环境

webpack优化构建速度
（可用于生产环境）

1. 优化babel-loader
   缓存用于开发环境,生产环境基本不用
   用 include exclude明确范围
2. IgnorePlugin
   避免一些模块引入
   不用的话，可能造成一些问题，比较打包后的体积大、打包慢
3. noParse
   避免打包一些东西，提高生产环境打包的速度
4. happyPack
5. ParallelUglifyPlugin(必须用于生产环境，压缩代码)
   webpack优化构建速度
   （不可用于生产环境！）
6. 自动刷新
7. 热更新
8. DllPlugin