关于webpack的一些面试题~~

1、什么是webpack或者是对webpack的理解？

        webpack是一个打包模块化静态打包工具（Js打包工具），在webpack中一切文件皆模块（一个模块对应一个文件），webpack只能解析js和json文件，通过loader转换文件，让webpack能够处理除js和json文件之外的其他类型的文件，将他们转换为有效模块以供应用程序使用，以及被天教导依赖图中去；通过plugin注入钩子，扩展webpack的功能使其更加灵活。最后输出有多个模块组合成的文件。

        webpack专注构建模块化项目，可以看做一个打包机器；webpack就是分析项目结构，找到js模块以及浏览器不能直接运行的拓展语言（如sass、less、ts等），并将其打包成合适的格式。

        webpack是基于入口的，会自动的递归解析入口所需要加载的所有资源文件，用不同的loader来处理不同的文件，用plugin来扩展webpack的功能，webpack需要找到入口，清楚对于不同的资源应该使用什么loader做出何种解析加工。

2、什么是bundle、什么是trunk、什么是module bundle？

        bundel：是有webpack打包出来的文件

        trunk：是代码块，一个trunk由多个模块组合而成，用于代码的合并和分割

        module：是开发的单独模块

3、loader、plugin是什么？

        loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。loader是用来告诉webpack如何转化处理某一类型文件，并且列入到打包处理的文件当中。

loader支持链式调用，从右至左执行，支持同步或异步函数

        plugin是用来定义打包过程的方式，一个插件是含有aplay方法的一个对象，通过aplay方法参与到整个webpack打包的各个流程。

4、有哪些常用的loader？解决什么问题的？

1. style-loader：把css代码注入到js文件中，将css添加到DOM的内联样式标签style里
2. css-loader：支持模块化压缩文件导入等特性
3. bable-loader：把es6语法转换成es5语法
4. eslint-loader：通过eslint检查js代码
5. file-loader：把文件输出到一个文件夹中，在代码中通过相对的url去引用输出的文件
6. url-loader：在文件很小的情况下，以base64的方式把文件内容注入到代码中
7. less-loader: 处理less代码
8. sass-loader: 处理sass代码
9. source-map-loader:加载额外的source、map文件，以方便断点调试
10. image-loader：加载并压缩图片

5、有哪些常用的plugin？解决什么问题？

1. define-plugin：可以定义一些全局的变量，我们可以在模块当中直接使用这些变量，无需作任何声明，define-plugin是 webpack自带的插件
2. common-chunk-plugin：提取公共代码
3. uglifyjs-webpack-plugin：通过uglify压缩es6代码
4. Hot-Module-Replacement-plugin：模块热更新插件，是webpack模块自带的，所以引入webpack后，在plugins配置项中直接使用即可
5. html-webpack-plugin：生成html文件
6. extract-text-webpack-plugin ：提取 JavaScript 中的 CSS 代码到单独的文件
7. clean-webpack-plugin：用于在打包前清理上一次项目生成的 bundle 文件

6、loader和plugin的不同？

1. 作用不同：

• loader直译为加载器，让webpack拥有加载和解析非js文件的能力
• plugin直译为插件，拓展webpack的功能，使webpack更加灵活，webpack运行过程中会广播出许多事件，plugin监听这些事件在合适的时机，通过webpack提供的api改变输出的结果

   2. 配置的位置不同：

• loader是在module.rules中配置，作为模块的解析规则而存在，类型为数组，每一项都是一个object，里面描述了对于什么类型的文件使用什么加载和使用的参数
• plugin是在plugins中单独配置，每一项都是一个plugin实例，参数都是通过构造函数传入的