Webpack Loader 学习笔记_vue-loader和babel-loader的执行顺序-CSDN博客

本文链接：https://blog.csdn.net/qq_35585701/article/details/81477840

本文深入探讨Webpack中的加载器（loader）工作原理及配置方法，包括css预处理器、postcss-loader、babel-loader、url-loader和vue-loader的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

loader

loader就是集成到webpack的文件处理方法，这些loader在webpack打包过程中，可以对指定类型的文件进行相应的处理。

在webpack中[万物皆模块]，loader其实就是node模块，作为模块，在执行完之后会导出内容。在webpack定义中，loader导出的是一个函数，loader会在执行源模块时，将源模块转换成通用模块。比如.js后缀的文件就是一个源模块，调用babel-loader进行转换。

loader优先级问题：
（1）配置项module的rules中同一个test下的use中的loader的优先级：优先处理的loader放在配置数组的后面，见下面的对scss的处理。

{       test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }

loader的执行顺序是：sass-loader postcss-loader css-loader vue-style-loader
（2）不同test内的优先级：可以用enforce:’pre’强调优先级
对js后缀文件的处理需要两个test的配置，使用 eslint-loader 和 babel-loader ，但是又不能配置在一个配置对象内，可使用 enforce: ‘pre’ 强调优先级，由 eslint-loader 优先处理。

module：{
  rules: [{
    text: /\.(vue|js|jsx)$/,
    loader: 'eslint-loader',
    exclude: /node_modules|build/,  // 这些地方的文件不在考虑范围内
    enforce: 'pre'
  },{
    text: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  }]
}

几种常用的loader
1.css预处理器配置
以配置scss文件为例

{       test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          'sass-loader'
        ]
      }

当在业务代码中引入一个scss文件时，
（1）sass-loader处理scss语法
（2）postcss-loader进行前缀添加
（3）css-loader将内容引入到文件中，类似@import和url（…）的方法实现require的功能
（4）vue-style-loader生成style标签，将计算后的样式插入到页面中（style-loader也是这个功能）
2.postcss-loader
postcss-loader 是一个强大的 css 处理工具，可以将 postcss 的配置拆分出去，新建 postcss.config.js 配置文件
const autoprefixer = require(‘autoprefixer’)

// 处理需要加浏览器前缀的css属性
module.exports = {
  plugins: [
    autoprefixer()
  ]
}

3.bable-loader
我们使用 babel 编译浏览器不能识别的 js、类 js 语法，如转义 ES6+、JSX等。同样将 babel-loader 的配置拆分出去，需要创建 .babelrc 并配置：

{
    "presets": [
        "env", 
        "stage-1"
    ],
    "plugins": [
        "transform-vue-jsx",
        "syntax-dynamic-import"
    ]
}

“presets”：需要启动怎样的预设转码
“env”：可以设置 targets 来智能识别当前运行环境，进行适当的转码，而不是一股脑的全部转码成 es5 等
“stage-1”:需要安装npm install –save-dev babel-preset-stage-1，预设转码方式的一种
“plugins”：一些插件，根据情况添加详见网址：https://excaliburhan.com/post/babel-preset-and-plugins.html
4.媒体资源loader
需要对图片、视频、文字等进行loader的配置，用到的是url-loader
例如对图片的配置：

{
      test: /\.(png|gif|jpg|jpeg|svg)$/,
      use: [{
        loader: 'url-loader',
        options: {
          limit: 1024,
          name: 'resources/[path][name].[hash:8].[ext]' // 生成到dist底下的resource中，路径按照原路径已有的名字命名
        }
      }]
    }

url-loader
*会配合 webpack 对资源引入路径进行复写，也就是所谓的引入路径的问题。例如：background样式用url引入背景图，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题需要file-loader解决（后面详细说明）
* 会以 webpack 的输出路径为基本路径，以 name 配置进行具体输出
* limit 单位为 byte，小于这个大小的文件会编译为 base64 写进 js 或 html
这里不得不说到另外一个loader：file-loader
file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
所以说url-loader到底解决了什么问题呢？
（1）资源引入路径的问题
（2）图片较多时，会发很多http请求，页面性能降低的问题。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。
url-loader和file-loader是什么关系呢？
简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。
上述代码中的options未涉及到的两个参数是:outputPath publicPath
这部分详见网址：https://blog.csdn.net/qq_38652603/article/details/73835153
5.vue-loader
打包vue项目时，会用到vue-loader，它的作用是将vue组件转化为js模块
相关特性见官网：https://vue-loader-v14.vuejs.org/zh-cn/
具体使用：
vue-loader也是很强大的一个loader，我们一般将其提取出来vue-loader.config.js中，如下，其中isDev是对环境的判断

// vue-loader.config.js
module.exports = (isDev) => {
  return {
    preserveWhitepace: true,
    extractCSS: !isDev
    // cssModules: {
    //     localIdentName: '[path]-[name]-[hash:base64:5]',
    //     camelCase: true
    // },
    // hotReload: false, 根据环境变量生成
  }
}

在webpack.config.base.js中引入

// webpack.config.base.js
const creatVueLoaderOption = require('./vue-loader.config.js')

const isDev = process.env.NODE_ENV === 'development'
const config= {
  mode: process.env.NODE_ENV || 'production',
  module: {
    rules:[
      {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: creatVueLoaderOption(isDev)
    }
   ]
  }
}

vue-loader 会对 .vue 单文件组件进行处理，对 .vue 单文件组件内的各种 lang=”type” 我们可以在 vue-loader 的 options 配置不同的 loader，由于 vue-loader 内置了 postcss 对 css 进行处理，因此无需再对其进行配置

个人打包了一个简单的vue项目，详见github:https://github.com/LinlyX/myNotepade