webpack中loader的使用

webpack中的loader的使用

1、什么是loader？
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。
因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。

loader可以做哪些工作？

• 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript
• 将内联图像转换为 data URL
• 允许你直接在 JavaScript 模块中 import CSS文件

2、loader的安装
在 webpack 中通过 import 方式导入文件内容，
loader 并不是 webpack 内置的，所以要先安装后使用
你的项目需要用到哪个loader，就安装哪个，比如下面,

npm install --save-dev raw-loader
npm install --save-dev file-loader

…

3、loader怎么使用？
在你的应用程序中，有三种使用 loader 的方式：

• 配置（推荐）：在 webpack.config.js 文件中指定 loader。
• 内联：在每个 import 语句中显式指定 loader。
• CLI：在 shell 命令中指定它们。
  注意：不同loader的使用都是平级的，不存在嵌套的情况

4、常用的loader的使用
（1）raw-loader
raw-loader来实现静态资源内联

安装raw-loader

npm install --save-dev raw-loader

然后在 webpack.config.js 中进行配置

module.exports = {
   
  ...,
  module: {
   
      rules: [
      {
   
        test: /\.(txt|md)$/,
        use: 'raw-loader'
    	}
    ]
	}
}

（2）file-loader
把识别出的资源模块，移动到指定的输出目录，并且返回这个资源在输出目录的地址(字符串)
安装file-loader

npm install --save-dev file-loader

webpack.config.js中，

rules: [
  ...,
	{
   
	    // 匹配图片的格式，i表示不区分文件名字母的大小写
		test: /\.(png|jpe?g|gif)$/i,
        use: {
   
                loader: "file-loader",
                options: