Webpack中的 Loader

一、什么是loader

• 1.从webpack本身来说，主要是用作处理我们写的js代码，并且webpack会处理js之间的依赖。
• 2.但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css,图片，也包括一些高级的ES6转成ES5代码，将TypesScript代码庄臣ES5代码，将scss,less，转成css，将.jsx,.vue文件转成js文件等等。
• 3.对于 webpack本身的能力来说，对于这些转化是不支持的。这时候我们就可以给webpack扩展对应的loader就可以了。loader让webpack能够去处理其他类型的文件，并将他们装换为有效模块，以供应用程序使用。以及添加到依赖图中。

二、loader的使用

步骤一： 通过npm安装需要使用的loader
步骤二： 在webpack.config.js中的modules关键字进行配置

注意点： 一些资源转换会用到多个loader配置,这时要注意loader的书写顺序,loader按照从右到左

三、loader的特性

• 1.loader 可以通过 options 对象配置
• 2.loader 支持链式传递,链中的每个 loader 会将转换应用在已处理过的资源上
• 3.loader 也可以内联显示指定
• 4.loader 可以是同步的，也可以是异步的
• 5.除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块
• 6.loader 运行在 Node.js 中，并且能够执行任何 Node.js 能做到的操作
• 7.loader 能够产生额外的任意文件
• 8.loader 从右到左地取值(evaluate)/执行(execute)

四、常用的几种loader处理样式资源

1.style-loader

(1)安装

npm i style-loader -D 

2.css-loader

分析 css 模块之间的关系，并合成⼀个 css
(1)安装

npm i css-loader -D 

(2)webpack.config.js中的配置

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

注意点:使用了css-loader配置 还添加了style-loader

3.raw-loader

(1)安装

npm install --save-dev raw-loader

(2)src下的index.js中引入

import aaa from './data/aaa.txt';
console.log(aaa);
console.log('123')

(3)在w