文档章节

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

 阿豪boy
发布于 01/26 22:45
字数 305
阅读 2K
收藏 0

初始化一个项目

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"
    })
  ]
}

 

生产环境

开发环境

© 著作权归作者所有

粉丝 25
博文 1662
码字总数 1139099
作品 0
西安
私信 提问
加载中

评论(1)

阿豪boy 博主
这都能上推荐, 可想而知osc已经水成啥样了.....
webpack插件【cdn-loader】

新出炉的 webpack插件--cdn-loader(https://github.com/jso0/cdn-loader) 项目首页:https://github.com/jso0/cdn-loader 基本用法 (Usage) 在入口文件中require("cdn-loader + ? + ModuleNam......

我是李达康
2016/09/11
340
0
Webpack book --- 开发篇

看了 @SurviveJS 上 webpack book 这本书,书中内容详实,条理非常清晰,收获很多。所以选择将它翻译一下,并分享出来。要不然平常在配置项目里的 webpack 时,总是在网上 google 一段,要不...

Yzz
2019/04/24
0
0
兄dei,是时候给你的项目做一波优化了~

本文默认各位已经使用了动态路由、按需引入、压缩js、css等常规操作…(常用的方式构建工具基本都已集成) 体积篇 1. 开启gzip压缩(压缩率70%) 前端配置 Nginx配置 开启后前后对比效果图 ...

Ji_Brother
2019/01/08
0
0
webpack4 从零学习常用配置梳理

webpack 的核心价值就是前端源码的打包,即将前端源码中每一个文件(无论任何类型)都当做一个 pack ,然后分析依赖,将其最终打包出线上运行的代码。webpack 的四个核心部分 entry 规定入口...

开元中国2015
2019/05/29
11
0
webpack 先这么用

webpack 介绍 Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源; 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩...

fabself
2016/09/24
91
0

没有更多内容

加载失败,请刷新页面

加载更多

【03】Python科学计算:Pandas

上一章中,我们讲了 Python 的一个重要的第三方库 NumPy,今天我来给你介绍 Python 的另一个工具 Pandas。 在数据分析工作中,Pandas 的使用频率是很高的,一方面是因为 Pandas 提供的基础数...

郑加威
5分钟前
37
0
java 类变量, 实例变量,局部变量的区别

Java语言支持的变量类型有: 类变量:独立于方法之外的变量,用 static 修饰。(类的静态成员变量) 实例变量:独立于方法之外的变量,不过没有 static 修饰。(类的成员变量) 局部变量:类...

fairy1674
7分钟前
36
0
mbti性格测试哪种类型是企业所喜欢的?

1、完全看岗位需求 不同的岗位对性格的匹配是不一样的。比如一个保洁,你要求他具有领导者性格,完全不合适呀,只需要他忠诚,做事细致,为人诚实,就是完美!而有些职位,比如部门经理,需要...

蛤蟆丸子
15分钟前
39
0
开源多商户商城系统(b2b2c),开源多店铺系统,开源多商户分销系统

对于单商户开源商城系统,国外市场很多,国内的大多数都是营销手段,搞一个开源版本,一个付费版本,然后,开源的成了烂尾工程,一致维护收费的版本,对于开源版本的单商户,可以看一下fecma...

FecShop
16分钟前
57
0
什么时候使用PHP常量“ PHP_EOL”?

什么时候使用PHP_EOL是个好主意? 我有时会在PHP的代码示例中看到这一点。 这样可以处理DOS / Mac / Unix终端问题吗? #1楼 如果要输出多行,可以使用error_log()。 我发现许多调试语句在W...

技术盛宴
16分钟前
29
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部