webpack4-cdn-plugin

Requirements & Important Notes

Webpack Configuration

Installation

npm install -D webpack4-cdn-plugin
# or
yarn add --dev webpack4-cdn-plugin

Demo

Usage

const WebpackCDNPlugin = require('webpack4-cdn-plugin')
module.exports = {
 // ... other fields
 plugins: [
 // ...other plugins
 ]
}
if (process.env.NODE_ENV === 'production') {
 const cdnPlugin = new WebpackCDNPlugin({
 // whether to keep generated files (on local fs), default: `false`
 keepLocalFiles: false,
 // whether to keep generated sourcemaps, default: `false`
 keepSourcemaps: false,
 // whether to backup html files (before replaced), default: `false`
 backupHTMLFiles: true,
 // manifest file name (`String | false`)
 manifestFilename: 'manifest.json',
 // a function, which returns `Promise<url>`
 // you can do your compressing works with content
 // `params.content`: `String | Buffer`
 // `params.extname`: file extension
 // `params.file`: original file (with path)
 uploadContent({ content, extname, file }) {
 /**
 * Return falsy value means that you want to KEPP the
 * file as it is. This usually happens with certain
 * file types, which may not be supported by your CDN
 * provider, or must be under the same origin with your
 * HTML files(for example, files like `.wasm` that
 * should be loaded by `fetch` or `XMLHttpRequest`).
 *
 * !!! Note !!!
 * Be CAREFUL with media resources (especially images).
 * When you are using an image in your CSS file, while
 * deciding not to upload that it(the image), it CAN lead
 * to an unexpected `404 (Not Found)` ERROR.
 */
 if (['ico', 'txt', 'wasm'].includes(extname)) {
 return false
 }
 // You can also implement your own cache here
 const hash = md5(content)
 if (youCache.has(hash)) {
 return youCache.get(hash)
 }
 return require('your-cdn-provider').uploadContent({
 content: content,
 fileType: getFileType(extname)
 })
 // for testing
 // const hash = (Math.random() ).toString(16).split('.')[1]
 // return Promise.resolve(`https://cdn.example.com/${hash}.${extname}`)
 }
 })
 module.exports.plugins.push(cdnPlugin)
}