关于webpack的一些面试题（缓慢更新）

1.webpack与Grunt、Gulp这类打包工具备什么不一样

像Grunt、Gulp这类构建工具，打包的思路是： 遍历源文件 → 匹配规则 → 打包，这个过程当中作不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程当中是不关心的。

webpack跟其余构建工具本质上的不一样之处在于： webpack 是从入口文件开始，通过模块依赖加载、分析和打包三个流程完成项目的构建。在加加载、分析和打包的三个过程当中，能够针对性的作一些解决方案，好比code split（拆分公共代码等）。

固然，webpack还能够轻松的解决传统构建工具解决的问题：

• 模块化打包，一切皆模块，js是模块，css等也是模块
• 语法糖转换：好比ES6转ES五、TypeScript
• 预处理器编译：好比less、sass等
• 项目优化：好比压缩、CDN
• 解决方案封装：经过强大的Loader和插件机制，能够完成解决方案的封装，好比PWA；
• 流程对接：好比测试流程、语法检测等。

2.wepback有几种写法

webpack的配置类型是多样的，最多见的是直接做为一个对象来使用，除了使用对象，webpack还支持函数 promise和多配置数组。

3.咱们要开发一个jQuery插件、vue组件等，须要怎么配置webpack

若是咱们打包的目的是生成一个共别人使用的库，那么可使用output.library来指定库的名称库的名称支持占位符与普通字符串。使用output.library肯定了库的名称以后，还可使用output.libraryTarget指定库打包出来的规范。使用output.externals配置项去除输出的打包文件中依赖的某些第三方js模块（例如jquery，vue等）。这些被依赖的模块应该由使用者提供，而不该该包含再js库文件中。

4.webpack的占位符[hash],[chunkhash],[contenthash] 有什么区别和联系。

• [hash]：是整个项目的hash值，其根据每次编译内容计算获得，每次编译以后都会生成新的hash，即修改任何文件都会致使全部文件的hash发生改变；在一个项目中虽然入口不一样，可是hash是相同的；hash没法实现前端静态资源在浏览器上长缓存，这时候应该使用chunkhash

• [chunkhash]：根据不一样的入口文件（entry）进行依赖文件解析，构建对应的chunk，生成相应的hash；只要组成entry的模块文件没有变化，则对应hash也是不变的，因此通常项目优化时，会将公共代码库拆分到一块儿，由于公共代码库代码变更较少的，使用chunkhash能够发挥最长缓存的做用

• [contenthash]：使用chunkhash存在一个问题，当在一个js文件引入css文件，编译后他们的hash是相同的。并且，只要js文件内容发生改变，与其关联的css文件hash也会改变，针对这种状况，能够把css从js中抽离出来并使用contenthash。

5.什么是bundle，chunk，module

• module：开发中的每个文件均可以看做是module，模块不局限于js，也包含css，图片等。
• chunk：表示代码块，一个chunk能够由多个模块组成。
• bundle：最终打包完成的文件，通常就是和chunk一一对应的关系，bundle就是对chunk进行编译压缩打包等处理后的产出。

6.能不能手写一个Webpack配置？

// 手写一个webpack配置最主要的就是 entry, output,module.rules(loader)和plugin

module.exports = {
	entry: './src/index.js',
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			}
		]
	},
	plugins: [
		new ExtractTextPlugin({
			filename: 'style.css'
		})
	]
}

7.在js中怎么调用Loader来处理一个模块?

const html = require('html-loader！./test.html');
console.log(html)

8.Loader的解析顺序是怎样的？

从右向左或者从下至上。

9.什么是JavaScript模块化开发，有哪些可遵循的规范

模块是指为了完成某种功能所需的程序或者子程序，模块是系统中职责单一且可替换的部分。模块化开发是指如何开发新的模块和复用已用的模块来实现应用的功能。JavaScript可遵循的主流规范有：commonJS，AMD和ES6 module。

10.webpack中怎么获取一个模块引用另一个模块时传入的query

// main.js
const component = require('./component-loader?commponent=demo')

// component-loader.js
const querystring = require('querystring')
const query = querystring.parse(__resourceQuery.slice(1)) // 去掉 ？ 
consolelog(query);  // {comonent: demo}

11.怎么实现webpack的按需加载？什么是神奇注释?

在webpack中，import不只仅是ES6 module的模块导入方式，仍是一个相似require的函数，咱们能够经过import('module')的方式引入一个模块，import()返回的是一个Promise对象；使用import（）方式就能够实现webpack的按需加载。在import（）里能够添加一些注释，如定义该chunk的名称，要过滤的文件，指定引入的文件等等，这类带有特殊功能的注释被称为神器注释。

12.Babel的preset-env是什么

babel的语法转换是经过强大的插件系统来支持的。babel的插件分为两类：转换插件和语法解析插件。

不一样的语法对应着不一样的转换插件，好比咱们要将箭头函数转换成为es5的函数写法，那么能够单独安装@babel/plugin-transform-arrow-functrions插件，若是不想一个个的添加插件，那么可使用插件组合preset（插件预设，插件组合更加好理解一些），最多见的preset是@babel/preset-env。

13.懂得babel的原理妈？你会手写babel插件吗？

babel是一个JavaScript的静态解析分析编译器，所谓静态分析指的的在不须要执行代码的前提下对代码进行分析和处理的过程。要实现babel从一个语法转换成另一种语法，须要通过三个主要步骤：解析，转换，生成。

• 解析：指的的首先将代码通过词法解析和语法解析，最终生成一棵AST（抽象语法树），在babel中，语法解析器是Babylon；

• 转换：获得AST以后，能够对其进行遍历，在此过程当中对节点进行添加，更新和移除等操做，babel中AST遍历工具是@babel/traverse；

• 生成：通过一系列转换以后获得的一棵新树，要将树转换成代码，就是生成的过程，babel用到的是@babel/generator。

在babel中，代码会由babel先进行解析AST，babel插件作的事情就是写vistor而已，因此babel插件固定的模板以下：

module.exports = () => { return { name: 'example-plugin', visitor: { Identifier(path, state) {

}
	}
}

}

14.babel怎么作polyfill，polyfill的最佳实践是什么？

babel只负责进行语法转换，即将es6语法转换成es5语法，但若是是在es5中，有些对象，方法实际在浏览器中多是不支持的，例如：promise，array.prototype.includes，这时候就须要@babel/polyfill来作模拟。

@babel/polyfill虽然能够解决模拟浏览器不存在对象方法的事情，可是有如下两个问题：

• 直接修改内置的原型，形成全局污染；
• 没法按需引入，webpack打包时，会把全部的polyfill都加载进来，致使产出文件过大。

为了解决这个问题，babel社区又提出了@babel/runtime的方案，@babel/runtime再也不修改原型，而是采用替换的方式，好比咱们用promise，使用@babel/polyfill会产生一个window.promise对象，而@babel/runtime则会生成一个_Promise（示例而已）来替换掉咱们代码中用到的Promise.另外@babel/runtime还支持按需引入。

babel怎么针对不一样的浏览器打包不一样的适配代码

browserslist就是帮助咱们来设置目标浏览器的工具。它实际上就是声明了一段浏览器的集合，咱们的工具能够根据这段集合描述，针对性的输出兼容性代码。