Vue Loader预处理器的理解

Vue Loader预处理器的理解

官方介绍：

在webpack中,所有的预处理器需要匹配对应的loader。Vue Loader允许你使用其它webpack loader处理Vue组件的某一部分。它会根据lang特性以及你webpack配置中的规则自动推断要使用的loader。

vue-loader是什么？

webpack的loader

用来打包、转译js或者css文件，简单的说就是把你写的代码转换成浏览器能识别的，还有一些打包、压缩的功能等

基于webpack的一个loader，解析和转换.vue文件，提取其中的逻辑代码script、样式代码style、以及HTML模板template，在分别把它们交给对应的Loader去处理，核心的作用就是提取。

配置方式

loader配置：

• 在 webpack.config.js文件中指定 loader

• 写在module.rules属性中

属性介绍：

• rules是一个数组的形式，因此我们可以配置很多个loader

  扫描二维码关注公众号，回复： 14854328 查看本文章

• 每一个loader对应一个对象的形式，对象属性test为匹配的规则，一般情况为正则表达式

• 属性use针对匹配到的文件类型，调用对应的loader进项处理

  代码编写,如下形式：

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

  特性

  • 处理css模块 use配置三个loader分别处理css文件，最终变成js代码

    看loader配置的代码，可以知道，

    顺序为相反顺序,执行顺序：

    1. sass-loader
    2. css-loader
    3. style-loader`

  • loader可以是同步的，也可以是异步的

  • loader运行在Node.js中，并且能够执行任何操作

  • 除了常见的通过package.json的mian来将一个npm模块导出为loader，还可以在moudle.rules中使用loader字段直接引用一个模块

  • 插件(plugin)可以为loader带来更多的特性

  • loader能够产生额外的任意文件

  常见的loader

  • js:babel-loader

  • css: css-loader + style-loader

  • sass: sass-loader

  • less: less-loader

  • 文件：file-loader

  • 处理CSS： postcss-loade

  • url：url-loader

    和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url

  • 压缩html：html-minify-loader

  • ES6转ES：bael-loader

参考文档链接：
https://vue-loader.vuejs.org/zh/guide/pre-processors.html
https://www.cnblogs.com/Sherlock09/p/11023593.html
https://vue3js.cn/interview/webpack/Loader.html#%E4%B8%89%E3%80%81%E5%B8%B8%E8%A7%81%E7%9A%84loader