webpack面试题

常用的loader

1、打包less、css

css-loader : 将css文件变成commonjs模块加载js中

style-loader :动态创建 style 标签，将 css 插入到 head 中.

less-loader :负责处理编译 .less 文件,将其转为 css

sass-loader：将SCSS/SASS代码转换成CSS

2、样式中的图片

file-loader ：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)

url-loader：资源大小小于 某值 时，将资源转换为 base64，超过 某值 时，将图片拷贝到 dist 目录

3、html中的图片

html-loader

4、css兼容性处理

postcss-loader :自动生成浏览器兼容性前缀

postcss-preset-env

5、js语法检查

eslint-loader

eslint-config-airbnb-base

eslint-plugin-import

6、将JS代码向低版本转换

babel-loader

@babel/core

@babel/preset-env

7、 在一些性能开销较大的 loader 之前添加 cache-loader，将结果缓存中磁盘中

cache-loader

cacheDirectory: true

8、同一时刻处理多个任务

happypack、thread-loader

9、映射会源文件的具体位置

source-map-loader

devtool: ‘cheap-module-eval-source-map’

常用的plugin

1、html文件

html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)

web-webpack-plugin：可方便地为单页应用输出 HTML，比 html-webpack-plugin 好用

2、自动打包运行

webpack-dev-server

3、提取css为单独文件

mini-css-extract-plugin

4、js兼容性处理

@babel/polyfill

5、清空打包目录

clean-webpack-plugin

7、将单个文件或整个目录复制到构建目录

copy-webpack-plugin

8、热模替换

HotModuleReplacementPlugin

9、定义环境变量

DefinePlugin

10、测量各个插件和loader所花费的时间

speed-measure-webpack-plugin

11、开启 JS 多进程压缩

webpack-parallel-uglify-plugin

uglifyjs-webpack-plugin

12、为模块提供中间缓存

hard-source-webpack-plugin

13、忽略第三方包指定目录