webpack 面试题（实战加原理）

WebPack 为什么被广泛使用？

1. 有各种loader 可以对css、js 进行预处理
2. 庞大的社区
3. 模块化
4. 4大核心概念 入口（entry）出口（output）loader 插件（plugin）

有哪些常见的 Loader？他们能解决什么问题？

1. style-loader 将css 添加到dom的内联标签上
2. sass-loader css scss 预处理
3. html-minify-loader 压缩HTML
4. babel-loader 用babel来转换ES6文件到ES5

有哪些常见的 Plugin ？他们能解决什么问题？

1. DLLPlugin 常用插件 对webpack 构建进行优化 DLLReferencePlugin 将 DllPlugin 会自动引入编译后文件
2. NpmInstallWebpackPlugin 运行 npm run start 会自动下载依赖
3. ProvidePlugin 无需 import 引入插件 如jquery

Loader 和 Plugin 的不同

Loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
loader中有两个配置选项

• test 用于标识loader用于哪些文件
• use 代表使用哪一loader

	//webpack.config.js
	const path = require('path');
	
	const config = {
	  output: {
	    filename: 'my-first-webpack.bundle.js'
	  },
	  module: {
	    rules: [
	      { 
		      test: /\.txt$/, //标识后缀.txt的文件进行转换
		      use: 'raw-loader' //表示使用raw-loader 进行文件转换
	      }
	    ]
	  }
	};
	module.exports = config;

重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。

Loader 是webpack 打包过程中对源文件一个一个进行处理（对模块的源代码进行转换）

Plugin
Plugin 插件是对构建过程进行整体处理（执行范围从打包和优化到压缩，一直到重新定义环境中的变量。）
webpack 插件是一个带有apply 的对象

Webpack 的构建流程是什么？

Webpack在启动后，从入口点开始，webpack递归地构建一个依赖关系图，其中包括了引用所需要的每一个模块，每找到一个模块（module）就会根据module.rules 中的loader 进行转换处理，转换完成后会将所有这些模块捆绑为少量的捆绑包（通常只有一个捆绑包）转换成文件输出，以供浏览器加载。
在整个构建中，webpack 会在恰当的时机进行plugin插件的执行，从而完成项目的优化。

Webpack 的热更新是如何做到的？说明其原理？

webpack 的热更新依赖于HotModuleReplacementPlugin 插件 配置HotModuleReplacementPlugin插件一般情况不需要进行配置

new webpack.HotModuleReplacementPlugin({
  // Options...
});

//webpack.config.js
module.exports = {
  //...
  devServer: {
    hot: true
  }
};
请注意，要完全启用HMR，需要webpack.HotModuleReplacementPlugin。
如果使用--hot选项启动webpack或webpack-dev-server，该插件将自动添加，
因此您可能不需要将其添加到webpack.config.js中。

热加载原理
简单讲 HMR 的工作方式就是 编辑器文件更改保存后，webpack重新构建模块后将旧模块替换为新模块，
更多热更新的细节请看这个介绍
Webpack 的热更新原理