Webpack面试题（webpack是什么/打包命令/默认存在什么地方/loader有哪些/plugin有哪些）

1.webpack是什么?作用是什么? 默认的入口文件什么?

1.webpack是什么？

是一个模块化打包工具，将不同的资源和文件，进行打包，合并在一个文件里。

2.作用

（1）重新加载编译，将浏览器不认识的语法编译成浏览器认识的语法。less编译成css,ES6语法转换成ES5。

（2）减少io请求。webpack会发送一个html页面到浏览器，这时打开控制台会发现html页面通过script,link等标签引用的静态，浏览器会再次发出请求去获取这些资源。webpack打包，将所有的静态资源都合并好了，减少了io请求。

3.默认的入口文件

./src/index.js 默认入口文件

./dist/main.js 默认出口文件

2.webpack打包命令是什么? 打包的文件默认存在什么地方?

打包命令是npm run build 或者 yarn build

webpack的默认打包入口文件为src/index.js,默认输出文件路径为dist/main.js

想要修改默认入口文件和默认输出文件时,只需打开webpack.config.js修改entry和output命令行代码即可。

3.webpack的loader有哪些? 作用是什么? babel的作用是什么?

1、file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件。
2、url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去。
3、source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试。
4、image-loader：加载并且压缩图片文件
5、babel-loader：将ES6转化为ES5。
6、css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性。
7、style-loader：把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS。
8、eslint-loader:通过 ESLint 检查 JavaScript 代码。

babel是一种将es6语法转换为浏览器能解析的es5语法的一种工具

4.webpack的plugin有哪些(HtmlWebpackPlugin和webpack-dev-server)?作用是什么?

1.HtmlWebpackPlugin

HtmlWebpackPlugin 简化了html的创建，便于为webpack打包提供服务，

在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中

2.clean-webpack-plugin 删除（清理）构建目录

3.mini-css-extract-plugin 提取 CSS 到一个单独的文件中

4.DefinePlugin 允许在编译时创建配置的全局对象，是一个webpack内置的插件，不需要安装

____________________________________________________________________________

5.webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务

主要提供两个功能：

1.为静态文件提供服务
2.自动刷新和热替换