前端面试题整理——webpack相关考点

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

一、基本配置

1、拆分配置和merge

将公共配置跟dev和prod的配置拆分，然后通过webpack-merge对配置进行整合。

2、启动本地服务

dev环境启动devserver配置。

3、处理ES6

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

4、处理样式

使用postcss-loader、css-loader、style-loader等，这里有个考点是loader的执行顺序是从后往前执行。

5、处理图片

在dev环境直接使用file-loader进行图片的直接引用，prod环境会使用url-loader对小图片进行base64编码。

6、模块化

webpack天生支持模块化。

二、高级配置

1、配置多入口

entry设置多入口文件，在output输出文件使用[name]根据entry的key动态生成输出文件名

plugins要设置多个HtmlWebpackPlugin，根据多入口生成多个html文件，同时要设置chunks，来引入相应入口文件，如果不设置则会把全部入口文件都引入 。

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

在plugins使用new CleanWebpackPlugin()，会默认清空 output.path 指定的文件夹内容。

3、抽离css文件

mini-css-extract-plugin使用这个插件的loder来替换style-loader。

在plugins里面配置mini-css-extract-plugin的filename，用于设置存放抽离的css具体目录和名字。

使用webpack的optimization的minimizer加入 terser-webpack-plugin 和 optimize-css-assets-webpack 插件来压缩抽离的css。

4、抽离公共代码

使用webpack的optimization的splitChunks

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