webpack基础(6).资源管理(loader)

一、什么是loader

webpack只能理解 js 和 json 文件，这是webpack自带的能力。
loader可以让webpack处理其他类型的文件，并对其转换成有效的模块，让应用程序使用，以及添加到依赖图中。

loader的属性：
在webpack的配置中，loader有两个属性。
test: 表示哪些文件会被转换。
use: 表示使用什么 loader 进行转换。
例子：

const path = require('path');

module.exports = {
  output: {
    filename: 'bundle.js'
  },
  rules: [
    {
      test: '/\.txt$/',
      use: 'raw-loader'
    }
  ]
}

这里例子告诉webpack编译器（compiler），当遇到require() / import 语句中，被解析为 ‘.txt’ 的路径时，对它打包前，先用 raw-loader 转换一哈。

二、加载CSS

1. css

要在 js 模块中 import 一个 css 文件，需要安装 style-loader 和 css-loader，并在 module 模块中添加这些loader.

npm install --save-dev style-loader css-loader

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

模块 loader 可以链式调用，转换顺序从后往前。
上面的例子中，先使用 css-loader 转换，再将转换后结果传递给 style-loader。
需要注意，加载顺序不能写错，否则会报错！

在浏览器检查元素里面就能看到 css 文件中的样式被引入到了的

2. less

如果要加载less，也是先安装再设置module。

npm install less less-loader --save-dev

module.exports = {
  rules: [
	{
        test: /\.(css|less)$/,
        use: ['style-loader','css-loader','less-loader']
      },
  ]
}

通过三个loader实现了less文件的解析。当然，这里的加载顺序也不能随便变哈~

三、抽离和压缩css

刚刚的操作把 css 里面的样式通过<style>引入到了里面，现在我们想通过<link>引入样式文件的方式来引入样式。
多数情况下，我们需要把css文件进行压缩，以便在生产环境里面节省时间，同时还需要把 css 文件抽离成一个单独的文件。
要实现这个功能，需要使用如下两个插件：

• 抽离：mini-css-extract-plugin；
• 压缩：css-minimizer-webpack-plugin

1. 抽离成一个文件 —— mini-css-extract-plugin

（这个插件是基于webpack5的新特性构建，所以需要webpack5环境哈）
安装

npm install mini-css-extract-plugin --save-dev

webpack.config.js配置

// ...
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 引入模块

module.exports = {
  // ...
  plugins: [
    // ...
    new MiniCssExtractPlugin({
      filename: 'styles/[contenthash].css' // *设置生成的css的文件路径及名称，这里是生成随机hash名称
    })
  ],

  module: {
    // ...
    rules: [
      {
        test: /\.(css|less)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
  }
}

npx webpack 编译一哈
可以看到编译后的结果，dist里面生成了一个css文件，而且html里面通过link标签引入了这个文件。


2. 压缩成一个文件 —— css-minimizer-webpack-plugin
安装插件

npm install css-minimizer-webpack-plugin -- save-dev

webpack.config.js

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

module.exports = {
  // ...
  mode: 'development', // *开发模式
  // ...
  optimization: {
    minimizer: [
      new CssMinimizerPlugin()
    ]
  }
}

再执行编译就可以看到编译后的文件被压缩啦！

四、在css里面加载image图片

可以使用内置的Asset Modules来加载图片资源；或者直接在css里面引入图片路径。下面就是直接在引入的 css 文件中加入background-image属性使用。
style.css

.block-bg { background-image: url(./assets/webpack-logo.svg) ; }

五、加载font字体

1. 在项目中添加一些字体文件
   
2. webpack.config.js

module: {
	rules: [
		{
			test: /\.(woff|woff2|eot|ttf|otf)$/i,
			type: 'asset/resource',
		},
	]
}

3. style.css
   配置好 loader 并将字体文件放在合适的位置后，你可以通过一个 @font-face 声明
   将其混合。本地的 url(…) 指令会被webpack获取处理，就像它处理图片一样。

@font-face {
  font-family: 'iconfont'; // *设置一哈我们的字体名称
  src: url('./assets/iconfont.ttf') format('truetype'); // *引入字体文件
}
.icon {
	font-family: "iconfont" !important; // *使用引入的字体
	font-size: 2rem;
}

六、加载数据( csv, tsv, xml)

以上我们晓得怎么加载image、font字体，此外，可以加载的有用资源还有数据，如JSON文件、CSV、TSV、XML.
类似于NodeJS，JSON 支持实际上是内置的，也就是说 import Data from ‘./data.json’ 默认将正常运行。
要导入 CSV、TSV 和 XML，可以使用 csv-loader 和 xml-loader。

1. install这些loader

npm install --save-dev csv-loader xml-loader

2. webpack.config.js

module: {
  rules: [
    {
      test: /\.(csv|tsv)$/i,
      use: ['csv-loader']
    },
    {
      test: /\.xml$/i,
      use: ['xml-loader']
    }
  ]
}

七、加载yaml, toml, json5文件

通过使用 自定义 parser 替代特定的 webpack loader，可以将任何 toml 、 yaml 或 json5 文件作为 JSON 模块导入。

1. 安装

npm install toml yamljs json5 --save-dev

2. webpack.config.js

const toml = require('toml');
const yaml = require('yamljs');
const json5 = require('json5');

module.exports = {
  module: {
    rules: [
      {
        test: /\.toml$/,
        type: 'json',
        parser: {
          parse: toml.parse
        }
      },

      {
        test: /\.yaml$/,
        type: 'json',
        parser: {
          parse: yaml.parse
        }
      },

      {
        test: /\.json5$/,
        type: 'json',
        parser: {
          parse: json5.parse
        }
      }
    ]
  }
}

八、小节

1. 除了上一节学过的四种资源模块来引入外部资源以外，我们还可以使用loader来引入几大类型文件；
   loader：可以让webpack处理其他类型的文件，并且将他们转换为有效的模块，来供应用程序使用。
2. 加载css: style-loader, css-loader
   引入css预处理工具：style-loader,less-loader, sass-loader
3. 抽离css: mini-css-extract-plugin
   压缩css： css-minimizer-webpack-plugin
4. 加载image图片资源：可以使用内置的Asset Modules来加载图片资源；或者直接在css里面引入图片路径。
5. 加载font字体：使用asset resource这个资源类型引入字体文件；
6. 加载数据：使用csv-loader, xml-loader加载 csv, tsc, xml 类型的文件；
7. 自定义JSON类型：利用自定义 JSON 类型加载 yaml, toml, json5