【Webpack】预处理器 - 常用loader介绍

选用合适的loader来处理不同的资源和不同的功能，以下是一些主流的loader，但这并不是全部，因为每时每刻都可能有新的loader 发布到 npm上

babel-loader

babe-loader 用来处理ES6+并将其编译为ESS，它使我们能够在最新的工程中使用最新语言特性，同时不必特别关注这些特性在不同平台的兼容问题

在安装时推荐使用以下命令:

npm install babel-loader @babel/core @babel/preset-env

在配置 babel-loader 时有一些需要注意的地方。请看下面的例子:

rules:[
{
   
   
	test: /\.js$/,
	exclude: /node_modules/,
	use:(
		loader: 'babel-loader',
		options:{
   
   
			cacheDirectory: true
			presets: [[
				'env'，{
   
   
					modules; false,
				}
			]]，
		},
	),
}
],

由于babel-loader通常属于对所有JS后缀文件设置的规则，所以需要在exclude中添加node_modules，否则会令 babel-loader 编译其中所有的模块，这将严重拖慢打包的速度，并且有可能改变第三方模块的原有行为。

对于babel-loader本身我们添加了cacheDirectory 配置项，它会启用缓存机制在重复打包未改变过的模块时防止二次编译，同样也会加快打包的速度。cacheDirector可以接收一个字符串类型的路径来作为缓存路径，这个值也可以为 true，此时其缓存目录会指向 node_modules/.cache/babel-loader

由于@babel/preset-env会将ES6 Module转化为CommonJS 的形式，这会导致 Webpack中的 tree-shaking 特性失效**@babel/preset-env的modules 配置项设置为false会禁用模块语的转化，而将ESModule的语法交给 Webpack 本身处理。**

ts-loader

ts-loader 与 babel-loader 的性质类似，它是用于连接Webpack 与 Typescript的模块。可使用以下命令进行安装:

npm install ts-loader typescript

Webpack 配置如下:

rules;[
	{
   
   
		test: /\.ts$/,
	    use:'ts-loader',
	}
],

需要注意的是，Typescript本身的配置并不在ts-loader 中，而是必须要放在工程录下的tsconfig.json中。
通过 Typescript 和 ts-loader，我们可以实现代码类型检查。

html-loader

html-loader用于将HTML文件转化为字符串并进行格式化，这使得我们可以把一个HTML片段通过JS加载进来

安装命令如下:

npm install html-loader

Webpack配置如下

rules;[
	{
   
   
		test: /\.html$/<