webpack loader开发并发布到npm

loader开发

loader可以被链式调用，为每一步创建一个loader而不是一个loader做所有的事情。
单一职责
链式组合
例如：开发一个comment-require-loader作用是将JavaScript代码中的注释语法：

// @require '../style/index.css'

转换成：

require('../style/index.css');

该loader的使用方法：

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['comment-require-loader'],
        // 针对采用了 fis3 CSS 导入语法的 JavaScript 文件通过 comment-require-loader 去转换 
        include: [path.resolve(__dirname, 'node_modules/imui')]
      }
    ]
  }
};

实现如下：

function replace(source) {
    // 使用正则把 // @require '../style/index.css' 转换成 require('../style/index.css');  
    return source.replace(/(\/\/ *@require) +(('|").+('|")).*/, 'require($2);');
}

module.exports = function (content) {
    return replace(content);
};

loader发布

创建独立的库和包，可以使用npm link，将其关联到要测试的项目。
（1）首先在github上建立自己的仓库，克隆到本地，执行npm init初始化项目，编写自己的loader，并提交代码。
（2）在本地仓库的文件夹下执行npm link.
（3）上传loader至npm
1）首先在npmjs.com注册一个npm账号，邮箱验证。
2）执行npm login进行登录

3）执行npm publish 进行发布

若出现报错
检查仓库是否被设成淘宝镜像库npm config get registry https://registry.npm.taobao.org/若是则设置成原仓库：npm config set registry=http://registry.npmjs.org；再次发布执行npm publish
4）发布成功后即可登录官网查看自己的loader

5）在项目中通过npm i webpack-loader-test-utils即可引入自己的loader