vueCli实现一个自定义loader

生活只会欺负穷人，爱情也是

webpack 作为前端项目的打包工具，具有很好的学习价值。下面来学习下其中的 Loader

Loader可以帮助webpack将不同类型的文件转换为webpack可识别的模块

webpack中Loader使用：https://www.webpackjs.com/loaders/

webpack中Loader API的介绍：https://www.webpackjs.com/api/loaders/

在Webpack中，默认的配置文件为：webpack.config.js。在学习Loader之前，要先了解下webpack.config.js和vue.config.js的区别：

webpack.config.js是webpack的配置文件，所有使用webpack作为打包工具的项目都可以使用，vue项目可以使用，react项目也可以使用

vue.config.js是vue项目的配置文件，专用于vue项目。通过vue.config.js中常用功能的配置，简化配置工作，当然如果需要更专业的配置工作，两者在vue项目中是可以并存的

vue-cli3创建项目时并不会自动创建vue.config.js，因为这个是可选项，所以一般都是修改webpack时才会自己创建一个vue.config.js

因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再为webpack做什么配置，所以没有暴露webpack的配置文件，但开发中依然可以创建vue.config.js去修改默认的webpack

Vue项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js

一. Loader的执行顺序
4 类loader的执行优级为：pre > normal > inline > post
相同优先级的 loader 执行顺序为：从右到左，从下到上

// 此时loader执行顺序：loader3 - loader2 - loader1
module: {
  rules: [
    { test: /\.js$/, loader: "loader1" },
    { test: /\.js$/, loader: "loader2" },
    { test: /\.js$/, loader: "loader3" },
  ],
},

// 此时loader执行顺序：loader1 - loader2 - loader3
module: {
  rules: [
    { enforce: "pre", test: /\.js$/, loader: "loader1", },
    {
      // 没有enforce就是normal
      test: /\.js$/, loader: "loader2", },
    { enforce: "post", test: /\.js$/, loader: "loader3",
    },
  ],
},

以webpack.config.js为例 只展示配置处代码

module.exports = {
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/[name].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: './src/customLoader/testLoader.js', // 这里是文件地址 导出一个函数即可
      },
    ],
  },
 
}

以vue.config.js为例 只展示配置处代码

module.exports = {
  configureWebpack: {
    resolveLoader: {
      modules: ['node_modules','./src/customLoader/'],
    },
  },
  chainWebpack(config) {
    config.module.rule('myLoader').test(/\.js$/).use('testLoader').loader('testLoader').end();
  }
};

src/customLoader/testLoader 将页面上所有的李大玄全部替换为大玄 实测是可以的

module.exports = function (srcCode) {
  // console.log('srcCode', srcCode)
  return srcCode.replace('李大玄', '大玄');
}

这是渲染出来的结果OK!!! 一个小小的demo完成了

image.png