This plugin extracts out your chosen dependencies from your build, and replaces them with a Script tag in your output html file referencing your desired package version in the JSDelivr CDN network. This plugin works alongside HtmlWebpackPlugin.
Do you manage your large dependencies via npm or yarn, or insert a script tag in your html template?
Using jsdelivr-cdn-webpack-plugin you get the best of both worlds. You can manage your package versions using your favourite package management tool, but leverage the power of JSDeliver network, your browser and the web to cache commonly used dependencies making your site start faster.
JSDelivr serves files from their large distributed network
This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.
npm i --save-dev jsdelivr-cdn-webpack-plugin html-webpack-pluginyarn add jsdelivr-cdn-webpack-plugin html-webpack-plugin --devUse your favourite libraries such as React
app.js
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
// ... do react stuffThen add the plugin to your webpack config. For example:
webpack.config.js
// Example Webpack configuration
const HtmlWebpackPlugin = require('html-webpack-plugin');
const JSDelivrCDNWebpackPlugin = require('jsdelivr-cdn-webpack-plugin');
module.exports = {
...
plugins : [
HtmlWebpackPlugin({
title: 'My App',
filename: 'dist/index.html'
}),
JSDelivrCDNWebpackPlugin({
env: 'production',
include: ['react', 'prop-types', 'lodash']
}),
]
};And run webpack via your preferred method.
Your generated index.html should look like
<!-- Example Generated HTML Output -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/react@16.5.2/react.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/prop-types@15.6.2/prop-types.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript" src="myapp-3e34c5eda4a2e99d1c0d.js"></script></body>
</html>MIT © Matthew McLeod