module: {
 rules: [
  {
   test: /\.css$/,
   use: [
    'vue-style-loader',
    'css-loader'
   ],
  },   {
   test: /\.vue$/,
   loader: 'vue-loader',
   options: {
    loaders: {
    }
    // other vue-loader options go here
   }
  },
  {
   test: /\.(png|jpg|gif|svg)$/,
   loader: 'file-loader',
   options: {
    name: '[name].[ext]"color: #ff0000">如何自定义loader


有了上面的经验，我们该如何自定义一个loader呢？其实也是非常简单的。
首先我们创建一个js文件，就取名叫test-loader吧。


var loaderUtils = require('loader-utils');

module.exports = function(source) {
  console.log("start process code...");

  var options = loaderUtils.getOptions(this) || {};
  if(options !== {}) {
    var replaceMap = options["replaceMap"];
    for(var key in replaceMap) {
      console.log(source);
      source = source.replace(key, replaceMap[key]);
      console.log(source);
    }
  }

  return source;
};




这就是全部的代码了，其实一个loader内部就是一个node模块，代码的编写就和平时写node一样就ok了。
test-loader的逻辑就是获取到设置的option，并且做一个文本的替换。
假设我们还有2个js文件，分别是test.js和index.js
test.js




const str = 'test is loaded';
module.exports = str;


index.js


const test = require('./src/test');
console.log(test);


然后我们在webpack.config.js中加入我们自己的test-loader。


{
  test: /\.js$/,
  loader: 'test-loader',
  exclude: /node_modules/,
  options: {
    replaceMap: {
      "loaded": "yeah"
    }
  }
}



其中options中，我们将“loaded”字符串替换成“yeah”。
但是我们的loader并没有上传到npm中，所以我们还需要在webpack.config.js中加入下面这段代码：


resolveLoader: {
  modules: [path.join(__dirname, './src/loaders'), 'node_modules']
}



用于加载本地loader。
这样我们最终构建出来的产物中，所有的“loaded”字符串就会被替换成“yeah”了。
小结


这篇文章非常浅显，主要就是讲了一下loader的使用方式，其实我们熟知的很多loader都是这么做的，只不过是业务逻辑上的复杂程度不同而已，大家也可以自己试试看。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。