webpack loader编写 与 npm module上传

目标：打不同环境的包，对文件进行特定处理

案例：打生成环境包时，删除掉mock相关代码

成果：https://www.npmjs.com/package/profile-loader

1、webpack配置

  resolveLoader:{
    // 去哪些目录下寻找 Loader，有先后顺序
    modules: ['node_modules','./build'],
  }

2、webpack配置

      {
        test: /\.mpx$/,
        use: {
          loader: "profile-loader", // 根据不同环境做不同处理
          options: {
            profile: process.argv.includes('-p') ? "prod" : "dev"
          }
        }
      },

3、profile-loader.js

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

let includeRegExp = new RegExp("\\/\\*include(.*)start\\*\\/[\\s\\S]*\\/\\*include end\\*\\/");
let excludeRegExp = new RegExp("\\/\\*exclude(.*)start\\*\\/[\\s\\S]*\\/\\*exclude end\\*\\/");

module.exports = function (source, option) {
    const options = loaderUtils.getOptions(this);
    let profile = options.profile || "";

    let matchs = source.match(includeRegExp, '');
    if (matchs && !matchs[1].includes(' ' + profile + ' ')) {  // include 里不包含当前profile，则将其删除
        source = source.replace(matchs[0], '');
    }

    matchs = source.match(excludeRegExp, '');
    if (matchs && matchs[1].includes(' ' + profile + ' ')) {  // exclude 里包含当前profile，则将其删除
        source = source.replace(matchs[0], '');
    }
    return source;
};

4、给代码加特定注释

  /*include dev start*/
  import './mock'
  /*include end*/
  /*exclude prod start*/
  import './mock'
  /*exclude end*/

npm module上传

1、到npm 网站上注册账号 https://www.npmjs.com/

2、初始化项目 npm init，将项目提交到github，增加 .gitignore、LICENSE、README.md

3、本地登录  npm login

4、提交项目 npm publish