npm 发布webpack插件 webpack-html-cdn-plugin

初始化一个项目

npm init

切换到npm源

淘宝

npm config set registry https://registry.npm.taobao.org

npm

npm config set registry http://registry.npmjs.org 

登录

npm login

登录状态

npm who am i

简单的插件,  将cdn文件插入到html中

const flatMap = require("array.prototype.flatmap");


function getList(modules, key, type) {
  return flatMap(modules, i => typeof i === 'string' ? i : i[key])
    .filter(
      i => i && i.split(".").pop() === type
    );
}

class WebpackHtmlCdnPlugin {
  constructor(
    {
      modules = [],
      isDev = true
    }) {
    this.modules = modules;
    this.isDev = isDev;
  }

  apply(compiler) {
    console.log(compiler);
    compiler.hooks.compilation.tap("WebpackHtmlCdnPlugin", compilation => {
      compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tapAsync(
        "WebpackHtmlCdnPlugin",
        (data, callback) => {
          let key = this.isDev ? "dev" : "prod";
          const jsList = getList(this.modules, key, "js");
          const cssList = getList(this.modules, key, "css");
          data.assets.js = jsList.concat(data.assets.js);
          data.assets.css = cssList.concat(data.assets.css);
          // console.log(" data.assets.js", data.assets.js);
          // console.log(" data.assets.css", data.assets.css);
          callback(null, data);
        }
      );
    });
  }
}

module.exports = WebpackHtmlCdnPlugin;

package.json, 设置用户和发布仓库

{
  "name": "webpack-html-cdn-plugin",
  "version": "1.0.1",
  "description": "webpack cdn inject",
  "main": "./src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "publishConfig": {
    "registry": "http://registry.npmjs.org"
  },
  "keywords": [
    "webpack",
    "cdn"
  ],
  "author": "ahaoboy <504595380@qq.com>",
  "license": "ISC",
  "devDependencies": {
    "array.prototype.flatmap": "^1.2.3"
  }
}

发布, 修改后发布的话, 需要更新版本信息

npm publish

使用, 指定版本号安装, 默认会安装最新版

npm i webpack-html-cdn-plugin@1.0.1 -D

const WebpackHtmlCdnPlugin = require("webpack-html-cdn-plugin");

configureWebpack: {
  externals: {
    vue: "Vue"
  },
  plugins: [
    new WebpackHtmlCdnPlugin({
      modules: [
        {
          dev: ["https://unpkg.com/vue@2.6.11/dist/vue.js"],
          prod: ["https://unpkg.com/vue@2.6.11/dist/vue.min.js"]
        }
      ],
      isDev: process.env.NODE_ENV === "development"
    })
  ]
}

生产环境

开发环境