关于怎么去实现自定义loader初探

在webpack官网，提供了怎么去实现一个自定义loader和plugin的说明，现根据官网，手动去实现一个简单的loader
A loader is a node module that exports a function，这是第一句话，证明一个loader就是一个node 模块，我暂时用的是ES5的写法

1.package.json

先来看看这个文件的配置

{
  "name": "replace-loader",
  "version": "1.0.0",
  "description": "This is a loader test ",
  "main": "index.js",
  "scripts": {
    "dev": "webpack"
  },
  "keywords": [
    "loader"，
    "webpack"
  ],
  "author": "chenbin",
  "license": "MIT",
  "dependencies": {
    "webpack": "^3.10.0"
  }
}

比较简单，就依赖一个webpack，其余的都没有

2.loader

loader的代码

var utils = require('loader-utils')
module.exports = function loader(source) {
  const options = utils.getOptions(this);
  console.log('source:',source)
  source = source.replace(/\[name\]/g, options.name);
  return `export default ${ JSON.stringify(source) }`;
};

第一句，是引入了一个package,这是用来获取loader的配置参数的，我们代码中，就是用来获取配置的name的

3.webpack.config.js

var webpack = require('webpack')
var path = require('path')
module.exports = {
  entry: {
    index: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path:path.resolve('./dest')
  },
  module: {
    rules: [{
        test: /\.(txt)$/,
        use: [{
          loader: path.resolve('./loader/changeNameLoader.js'),
          options: {
            name: 'test name'
          }
        }],
        include: path.resolve('./src')
      }
    ]
  }
}

webpack配置了入口文件和输出目录以及一个rules规则，用来解析以txt结尾的文件用changeNameLoader.js来处理

4.demo js

分别有一个入口文件index.js和一个txt文件helloWorld.txt
index.js

var html  = require('./helloWorld.txt')
console.log('I\'m the entry js')
console.log(html)

它require了一个txt文件，来看看这个文件的结构

Hello [name]!

很简单吧，ok，基本上就是这样了，我们来执行一下命令跑完之后，引用打包之后的js看看效果

image.png
可以看到，txt文件中的[name]被换成了我们的配置项中的name了
以上就是根据官网的描述实现的一个hello world级别的loader了,附上源码
自定义loader源码