编写一个webpack loader

Posted 2021-02-20 Light_LoverSong

作用

loader是一种打包的方案，webpack默认只识别js结尾的文件，当遇到其他格式的文件后，webpack并不知道如何去处理。此时，我们可以定义一种规则，告诉webpack当他遇到某种格式的文件后，去求助于相应的loader。

开发

新建loaders文件夹并创建三个loaders文件

// remove-comment-loader.js 去除注释

module.exports = function(source) {
  const reg = new RegExp(/(\/\/.*)|(\/\*[\s\S]*?\*\/)/g)

  return source.replace(reg, ‘‘)
}

// reverse-loader.js // 反转字符串
module.exports = function (src) {
    if (src) {
      console.log(‘--- reverse-loader input:‘, src)
      src = src.split(‘‘).reverse().join(‘‘)
      console.log(‘--- reverse-loader output:‘, src)
    }
    return src;
}

// uppercase-loader // 首字母大写
module.exports = function (src) {
  console.log(src, 33333)
  if (src) {
    console.log(‘--- uppercase-loader input:‘, src)
    src = src.charAt(0).toUpperCase() + src.slice(1)
    console.log(‘--- uppercase-loader output:‘, src)
  }
  return src
}

入口文件

// index.js
import myTxt from ‘./index.txt‘

const add = function (a, b) {
  return a + b
}
  /**
   * 注释
   */
  (function () {
    // 注释
    console.log(myTxt);
    console.log(add(1, 2));
  })
  
// index.txt
asdasdadsasdasdsasdasdas

打包文件

// webpack.config.js
const path = require(‘path‘)

module.exports = {
  mode: ‘none‘,
  entry: ‘./src/index.js‘,
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: ‘remove-comment-loader‘
      },
      {
        test: /\.txt$/,
        use: [
          ‘uppercase-loader‘,
          ‘reverse-loader‘
        ]
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, ‘dist‘)
  },
  resolveLoader: {
    modules: [‘node_modules‘, ‘./loaders/‘]
  }
}

打包后的效果

注释被删除了，txt文件字符也反转和首字母大写了

const add = function (a, b) {
  return a + b
}
  
  (function () {
    
    console.log(_index_txt__WEBPACK_IMPORTED_MODULE_0___default.a, 99888);
    console.log(add(1, 2));
  })

/***/ }),
/* 1 */
/***/ (function(module, exports) {

Adsadsasdsadsasdadsadsa

/***/ })

实际开发中我们会有各种各样的定制话的loader需要去使用，针对每种情况去开发对应的loader是加快我们开发效率的一种方式