npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webpack-cdn-inject

v1.2.0

Published

Plugin to inject CDN script blocks to DOM

Downloads

1,789

Readme

Build Status dependencies Status devDependencies Status

How it works

Webpack CDN Inject allows developers a way to define CDN hosted assets that will be added to their HTML documents. CDN hosted assets helps reduce your project's build times, bundle size and in some cases page speed.

Webpack CDN Inject accepts both JS (<script/> tag) and CSS (<link/> tag) configurations across both head and body of HTML documents.

Webpack CDN Inject works by injecting script/link CDN tags into all HTML files found within a given build's output assets. Therefor Webpack CDN Inject works with both HTMLWebpackPlugin and CopyWebpackPlugin.

So long as there is a HTML file in the build's output assets, Webpack CDN Inject will take care of the rest.


Install

npm i --save-dev webpack-cdn-inject
yarn add --dev webpack-cdn-inject

Webpack Config

const WebpackCDNInject = require('webpack-cdn-inject');

Instantiate a new WebpackCDNInject() class within Webpack configuration's plugin array:

module.exports = {
  "plugins": [
    new WebpackCDNInject({
      ...config
    })
  ]
};

Configuration

Option | Type | Description --- | --- | --- head | String array | Defines urls to be added to document head (tag type is defined by url's file extension). body | String array | Defines urls to be added to document body (tag type is defined by url's file extension).

body

All URLs added to the body option gets setup at the end of the document's body, but before any pre-existing scripts.

module.exports = {
  "plugins": [
    new WebpackCDNInject({
      body: ['url.js', 'url.css']
    })
  ]
};

head

All URLs added to the head option gets setup at the end of the document's head, but after all tags.

module.exports = {
  "plugins": [
    new WebpackCDNInject({
      head: ['url.css', 'url.js']
    })
  ]
};

Plugin Recommendations

Please support https://unpkg.com/ (mirror of everything on NPM) by using them as your CDN. Any module you would like to use found on NPM can be found on unpkg including all back versions.

By using https://unpkg.com/ you not only make endpoints be consistent in the configuration of this plugin, but you are helping raise awareness across developers to existence of https://unpkg.com/.

Please consider it!


Tests

Webpack CDN Inject comes with three tests head, body and copy. These are here to help you better understand the expectations of each option we covered above as well as stress test the plugin.

Simply run npm run test or yarn test from the root of the plugin to run all tests.

Running a test will produce a /dist/[test name] directory.

If you would like to change a test, update the root package.json file's test script to use any of the /test/*.test.config.js files.

  • body.test.config.js = Should produce a entry .js file and a test.html. The test.html file should have injected script tags in body of document before the existing script tag pointing to our entry .js file.The .html file in this test is provided to the build by HTMLWebpackPlugin.

  • body.test.config.js = Should produce a entry .js and a test.html. The test.html file should have injected link tags in head of document after any existing tags. The .html file in this test is provided to the build by HTMLWebpackPlugin.

  • copy.test.config.js = Should produce a entry .js file and a test.html. The test.html file should have both injected script tags in document body, and link tags in document head. The .html file in this test is provided to the build by CopyWebpackPlugin.