Gathering detailed insights and metrics for @xysfe/multi-origin-webpack-plugin
Gathering detailed insights and metrics for @xysfe/multi-origin-webpack-plugin
Installations
npm install @xysfe/multi-origin-webpack-pluginDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.20.2
NPM Version
8.19.4
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
1.0.5
Package Id
@xysfe/multi-origin-webpack-plugin@1.0.5
Unpacked Size
14.15 kB
Size
4.29 kB
File Count
5
NPM Version
8.19.4
Node Version
16.20.2
Published on
May 16, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
1
MultiOriginWebpackPlugin
提示
- 此插件依赖于
html-webpack-plugin插件 - 该插件会强制更改项目中的publicPath配置
- css样式中使用了相对路径的url，如
../img/xxx.png，若构建后引用的资源路径不正确，需要将使用了「ExtractTextPlugin」或「MiniCssExtractPlugin」loader的publicPath重设为'../'，可参考该文档MiniCssExtractPlugin
下载
1npm i @xysfe/multi-origin-webpack-plugin
使用方式
webpack.config.js
1const HtmlWebpackPlugin = require('html-webpack-plugin') 2const MultiOriginWebpackPlugin = require('@xysfe/multi-origin-webpack-plugin').web 3 4module.exports = { 5 entry: 'index.js', 6 output: { 7 path: __dirname + '/dist', 8 filename: 'index_bundle.js' 9 }, 10 plugins: [ 11 new HtmlWebpackPlugin(), 12 new MultiOriginWebpackPlugin() 13 ] 14}
vue.config.js
1const MultiOriginWebpackPlugin = require('@xysfe/multi-origin-webpack-plugin') 2 3module.exports = { 4 chainWebpack: config => { 5 config 6 .plugin('multi-origin') 7 .use(new MultiOriginWebpackPlugin()) 8 } 9}
注意事项
插件强依赖于NODE_ENV环境变量，用于处理线上发布后会导致测试环境资源不可访问的现状，若没有该变量则会退出构建。
正式环境的NODE_ENV必须是production，否则无法构建出正确的资源路径。
NODE_ENV环境变量注入方式:
1// file: package.json 2// webpack 3{ 4 "scripts": { 5 "dev": "cross-env NODE_ENV=development webpack...", 6 "dist": "cross-env NODE_ENV=production webpack..." 7 } 8} 9
1// vuecli 2// vuecli默认的mode为production 3{ 4 "scripts": { 5 "dev": "vue-cli-service build --mode development", 6 "dist": "vue-cli-service build" 7 } 8}
功能
- 插件将会注入全局变量，来获取到PHP返回的CDN地址，并且拼接成一个带协议和域名的链接，生成的页面片如下
1<!DOCTYPE html> 2<html> 3 <head> 4 <script>var __global_cdn__=(function(b,a){if(a.indexOf('http')===0){return a}else{if(a.indexOf('//')===0){return b.protocol+a}else{return b.protocol+'//'+b.host+a}}})(location, '{$CDN}')</script> 5 <meta charset="utf-8"> 6 <title>Webpack App</title> 7 </head> 8</html>
- 插件会检测代码中是否有指定的代码片段，在编译过程中提出警告，效果如下
- 插件会在js中注入动态public path，用于实现多域名cdn分离的效果，注入后的代码如下
1/******/ 2/******/ // __webpack_public_path__ 3/******/ __webpack_require__.p = "/static/insuranceV2/"; 4/******/ 5/******/ // set dynamic webpack public path by multi-origin-webpack-plugin 6/******/ __webpack_require__.p = window.__global_cdn__ ? window.__global_cdn__ + '/insuranceV2/' : '/static/insuranceV2/'; 7/******/
配置项
| Name | Type | Default | Description |
|---|---|---|---|
| regex | {Array} | ['xiaoyusan.com'] | 检测代码中需要匹配的字符串 |
| shouldCheck | {Boolean} | true | 选择是否需要提示域名警告 |
| fixedPublicPath | {Boolean} | false | 选择是否保持原来的publicPath配置（ssr开发环境使用） |
No vulnerabilities found.
No security vulnerabilities found.