Note: This only works on Webpack 4, if you're still on Webpack 3 or below please use version 1.x
CDN extension for the HTML Webpack Plugin
Enhances html-webpack-plugin functionality by allowing you to specify the modules you want to externalize from node_modules in development and a CDN in production.
Basically this will allow you to greatly reduce build time when developing and improve page load performance on production.
Installation
It is recommended to run webpack on node 5.x or higher
Install the plugin with npm:
npm install webpack-cdn-plugin --save-dev
or yarn
yarn add webpack-cdn-plugin --dev
Basic Usage
Require the plugin in your webpack config:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackCdnPlugin = require('webpack-cdn-plugin');
Add the plugin to your webpack config:
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin(),
new WebpackCdnPlugin({
modules: [
{
name: 'vue',
var: 'Vue',
path: 'dist/vue.runtime.min.js'
},
{
name: 'vue-router',
var: 'VueRouter',
path: 'dist/vue-router.min.js'
},
{
name: 'vuex',
var: 'Vuex',
path: 'dist/vuex.min.js'
}
],
publicPath: '/node_modules'
})
]
// ...
};
This will generate an index.html file with something like below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<link href="//unpkg.com/vue@2.3.3/dist/vue.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.17/dist/vue.runtime.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vuex@3.0.1/dist/vuex.min.js"></script>
<script type="text/javascript" src="/assets/app.js"></script>
</body>
</html>
And u also need config in
# src/router
import Vue from 'vue'
import VueRouter from 'vue-router'
if (!window.VueRouter) Vue.use(VueRouter)
// ...
// Any lib need Vue.use() just to do so
When you set prod to false, it will output urls using publicPath, so you might need to expose it as some sort of static route.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<link href="/node_modules/vue/dist/vue.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="/node_modules/vue/dist/vue.runtime.min.js"></script>
<script type="text/javascript" src="/node_modules/vue-router/dist/vue-router.min.js"></script>
<script type="text/javascript" src="/node_modules/vuex/dist/vuex.min.js"></script>
<script type="text/javascript" src="/assets/app.js"></script>
</body>
</html>
You can also use your own custom html template, please refer to html-webpack-plugin.
Please see the example folder for a basic working example.
Configuration
You can pass an object options to WebpackCdnPlugin. Allowed values are as follows:
modules:array or object(for multiple pages)
The available options for each module, which is part of an array.If you want inject cdn for multiple pages, you can config like this:
plugins:[
// ...otherConfig
new HtmlWebpackPlugin({
title: 'title',
cdnModule: 'vue',
favicon: 'path/to/favicon',
template: 'path/to/template',
filename: 'filename',
// other config
}),
new HtmlWebpackPlugin({
title: 'title',
cdnModule: 'react',
favicon: 'path/to/favicon',
template: 'path/to/template',
filename: 'filename',
// other config
}),
new WebpackCdnPlugin({
modules: {
'vue': [
{ name: 'vue', var: 'Vue', path: 'dist/vue.min.js' },
],
'react': [
{ name: 'react', var: 'React', path: `umd/react.${process.env.NODE_ENV}.min.js` },
{ name: 'react-dom', var: 'ReactDOM', path: `umd/react-dom.${process.env.NODE_ENV}.min.js` },
]
}
})
]
The extra html-webpack-plugin option cdnModule corresponds to the configuration key that you config inside the webpack-cdn-plugin modules
- If you do not give
cdnModulethis value, the default is to take the first one - If you set
cdnModule = false, it will not inject cdn
More detail to see #13
name:string
The name of the module you want to externalize
cdn:string (optional)
If the name from the CDN resource is different from npm, you can override with this i.e. moment is moment.js on cdnjs
var:string (optional)
A variable that will be assigned to the module in global scope, webpack requires this. If not supplied than it will be the same as the name.
path:string (optional)
You can specify a path to the main file that will be used, this is useful when you want the minified version for example if main does not point to it.
paths:string[] (optional)
You can alternatively specify multiple paths which will be loaded from the CDN.
style:string (optional)
If the module comes with style sheets, you can also specify it as a path.
styles:string[] (optional)
You can alternatively specify multiple style sheets which will be loaded from the CDN.
cssOnly:boolean | false
If the module is just a css library, you can specify cssOnly to true, it will ignore path.
localScript:string (option)
Useful when you wanted to use your own build version of the library for js files
localStyle:string (option)
Useful when you wanted to use your own build version of the library for css files
prodUrl:string (option)
Overrides the global prodUrl, allowing you to specify the CDN location for a specific module
devUrl:string (option)
Overrides the global devUrl, allowing you to specify the location for a specific module
prod:boolean | true
prod flag defaults to true, which will output uri using the CDN, when false it will use the file from node_modules folder locally.
prodUrl:string | //unpkg.com/:name@:version/:path
You can specify a custom template url with the following replacement strings:
:name: The name of the module e.g. vue
:version: The version of the module e.g. 1.0.0
:path: The path to the file e.g. lib/app.min.js
A common example is you can use cdnjs e.g. //cdnjs.cloudflare.com/ajax/libs/:name/:version/:path. If not specified it will fallback to using unpkg.com.
devUrl:string | /:name/:path
Similar to prodUrl, this option overrides the default template url for when prod is false
publicPath:string (optional)
Prefixes the assets with this string, if none is provided it will fallback to the one set globally in webpack.options.output.publicPath, note that this is always empty when prod is true so that it makes use of the CDN location because it is a remote resource.
optimize:boolean | false
Set to true to ignore every module not actually required in your bundle.
crossOrigin:string (optional)
Allows you to specify a custom crossorigin attribute of either "anonymous" or "use-credentials", to configure the CORS requests for the element's fetched data. Visit MDN for more information.
sri:boolean | false
Adds a Subresource Integrity (SRI) hash in the integrity attribute when generating tags for static files. See MDN for more information.
pathToNodeModules?: string (optional)
Path to the node_modules folder to "serve" packages from. This is used to determinate what version to request for packages from the CDN.
If not provided, the value returned by process.cwd() is used.
Contribution
This is a pretty simple plugin and caters mostly for my needs. However, I have made it as flexible and customizable as possible.
If you happen to find any bugs, do please report it in the issues or can help improve the codebase, pull requests are always welcomed.
Resources
Contributors
Many thanks to the following contributors:
-
使用webpack在构建HTML时需要安装并且使用html-webpack-plugin 插件但是在构建过程中会报错 报错信息如下： TypeError: Cannot read property ‘tap’ of undefined at HtmlWebpackPlugin.apply (D:\XXX\node_modules\html-webpack-plugin\index.js:40:31
-
开发环境devServer 我们在开发项目时(development|dev), 常常需要一个本地服务器托管本地资源,比如你们用的vscode的右键open in server 的插件.我们可以在webpack集成的打包环境中配置本地服务器 安装:npm install --save-dev webpack webpack-dev-server webpack-cli 配置参数: DevServe
-
用vue-cli启用脚手架，可以快速生成项目文件，运行npm run dev 可以开启本地服务。dev是利用webpack-dev-sevice启动本地localhost:8080服务。如果这时候我们想要调用后台api接口会产生跨域，在localhost:8080服务下无法调取接口。解决方法如下： 脚手架有一个webpack.config.js文件，可以配置webpack-dev-sevice。
-
安装插件webpack-cdn-plugin npm install webpack-cdn-plugin --save-dev // or webpack-cdn-plugin --dev 位置webpack.base.config.js，引入插件webpack-cdn-plugin const WebpackCdnPlugin = require('webpack-cdn-plugin')
-
1. vue.config.js配置cdn const isProd = process.env.NODE_ENV === 'production' //样式和JavaScript脚本的第三方cdn连接 const cdn = { css: ['https://cdn.jsdelivr.net/npm/element-ui@2.15.0/lib/theme-chalk/index.css'],
-
文件系统 本地 文件系统 - 本地 的存在为有条件的用户提供了独立部署的支持，其中文件存放在 storage/app 目录中。用户可以使用独立的系统对文件进行发布，只需要将公开地址填写进去即可。 本地公开 「本地公开」是在 ThinkSNS Plus 中默认的一种方式，主要是便于没有条件的用户简单的拥有储存功能。 设置 进入「CDN 管理」，CDN 项选择「文件系统」，然后磁盘选择「本地公开」 必
-
推荐使用 jsDelivr，能及时获取到最新版。你也可以在cdn.jsdelivr.net/npm/docsify/中浏览npm包的源代码。 获取最新版本 不指定特定版本号时将引入最新版。 <!-- 引入 css --> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css"> <!-- 引入 scr
-
问题内容： 简历 ：我需要在没有wepback或类似工具的情况下运行React Router。直接来自CDN链接，但我遇到了一些require.js错误。 我开始用React构建我的第一个应用程序，并且我在React Router上苦苦挣扎。 HTML： JS： 一切运行正常，但我在控制台上得到了这个： react.js：3639警告：您正在为上的prop 手动调用React.PropTypes验
-
maven-cdn-alioss-plugin 是一款阿里云 oss 上传插件，用于上传 cdn 文件（js、css、图片等）。 example1, 上传源码路径 <plugin> <groupId>com.fengjx.maven.cdn</groupId> <artifactId>maven-cdn-alioss-plugin</artifactId> <version>1.
-
你可以通过执行npm run preview -- --report来分析webpack打包之后的结果，观察各个静态资源的大小。你可以发现占用空间最多的是第三方依赖。如vue、element-ui、 ECharts等。 你可以使用 CDN 外链的方式引入这些第三方库，这样能大大增加构建的速度(通过 CDN 引入的资源不会经 webpack 打包)。如果你的项目没有自己的CDN服务的话，使用一些第三
-
使用方法 点击左下角上传文件 将文件拖拽到应用内 截图后粘贴到应用内（目前只支持截图粘贴） 右下角设置图像质量 左下角设置按钮可以设置所需 CDN 信息 Step0 下载 release 版本，目前只有 Mac 版 Step1 创建七牛账号和仓库，获取 accessKey/secretKey 在这里可以找得到： Step2 打开应用，填写对应信息。 点击左下角的设置按钮可以更改此内容。 上传文件前缀：