diff --git a/config/web/webpack.config.js b/config/web/webpack.config.js index f280d61..ceab6dd 100644 --- a/config/web/webpack.config.js +++ b/config/web/webpack.config.js @@ -21,6 +21,7 @@ const modules = require('./modules'); const getClientEnvironment = require('./env'); const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); const ForkTsCheckerWebpackPlugin = require('./../../plugins/ForkTsCheckerWarningWebpackPlugin'); +const InjectScriptWebpackPlugin = require('./../../plugins/InjectScriptWebpackPlugin'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const CompressionWebpackPlugin = require('compression-webpack-plugin'); @@ -774,6 +775,8 @@ module.exports = function (webpackEnv) { ].filter(Boolean), }, plugins: [ + // 非dev环境注入script + !isEnvDevelopment && new InjectScriptWebpackPlugin(), !isEnvDevelopment && new CompressionWebpackPlugin({ filename: '[path][base].gz', //压缩后的文件名 @@ -1011,7 +1014,8 @@ module.exports = function (webpackEnv) { // Turn off performance processing because we utilize // our own hints via the FileSizeReporter performance: false, - externals: { + // 在非开发模式下，排除相关模块，以使用CDN加载 + externals: !isEnvDevelopment ? { echarts: 'echarts', lodash: '_', react: 'React', @@ -1019,6 +1023,6 @@ module.exports = function (webpackEnv) { '@wangeditor/editor': 'wangEditor', '@fingerprintjs/fingerprintjs': 'FingerprintJS', 'bn.js': 'BN', - }, + } : {}, }; }; diff --git a/plugins/InjectScriptWebpackPlugin.js b/plugins/InjectScriptWebpackPlugin.js new file mode 100644 index 0000000..daddb5d --- /dev/null +++ b/plugins/InjectScriptWebpackPlugin.js @@ -0,0 +1,56 @@ +'use strict'; +const fs = require('fs'); +const path = require('path'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); + +class InjectScriptWebpackPlugin { + constructor(options = {}) { + this.injectsDir = options.injectsDir || './injects'; + } + + apply(compiler) { + compiler.hooks.compilation.tap('InjectScriptWebpackPlugin', (compilation) => { + HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync( + 'InjectScriptWebpackPlugin', + (data, cb) => { + const injectScripts = this.getInjectScripts(); + + if (injectScripts.length > 0) { + const scriptsToInject = injectScripts.map(script => + `` + ).join('\n'); + + // 在标签前插入脚本 + data.html = data.html.replace('', `${scriptsToInject}`); + } + + cb(null, data); + } + ); + }); + } + + getInjectScripts() { + const injectScripts = []; + // 使用 __dirname 获取当前文件的目录 + const injectsPath = path.resolve(__dirname, this.injectsDir); + + if (fs.existsSync(injectsPath)) { + const files = fs.readdirSync(injectsPath); + + files.forEach(file => { + if (path.extname(file).toLowerCase() === '.js') { + const filePath = path.join(injectsPath, file); + const content = fs.readFileSync(filePath, 'utf-8'); + injectScripts.push(content); + } + }); + } else { + console.warn(`Injects directory not found: ${injectsPath}`); + } + + return injectScripts; + } +} + +module.exports = InjectScriptWebpackPlugin; diff --git a/plugins/injects/version-check.js b/plugins/injects/version-check.js new file mode 100644 index 0000000..50333b3 --- /dev/null +++ b/plugins/injects/version-check.js @@ -0,0 +1,101 @@ +(function() { + var sys = {}; + var ua = navigator.userAgent.toLowerCase(); + var s; + (s = ua.match(/firefox\/([\d.]+)/)) + ? (sys.firefox = s[1]) + : (s = ua.match(/chrome\/([\d.]+)/)) + ? (sys.chrome = s[1]) + : (s = ua.match(/opera.([\d.]+)/)) + ? (sys.opera = s[1]) + : (s = ua.match(/rv:([\d.]+)/)) + ? (sys.ie = s[1]) + : (s = ua.match(/msie ([\d.]+)/)) + ? (sys.ie = s[1]) + : (s = ua.match(/version\/([\d.]+).*safari/)) + ? (sys.safari = s[1]) + : 0; + var browser = 'Unknown'; + var tip = document.createElement('div'); + var closeBtn = document.createElement('img'); + var contentHTML = + '您当前使用的浏览器可能会出现界面显示异常或功能无法正常使用等问题，建议下载使用谷歌，火狐，edge等新版本浏览器。'; + var handleClickClose = function (event) { + document.body.removeChild(tip); + }; + var startAppend = function () { + document.body.appendChild(tip); + tip.appendChild(closeBtn); + }; + + // closeBtn.style.position = 'absolute'; + // closeBtn.style.right = '20px'; + // closeBtn.style.bottom = '7px'; + // closeBtn.style.cursor = 'pointer'; + // closeBtn.style.width = '15px'; + // closeBtn.style.height = '15px'; + // closeBtn.src = '../assets/images/icon-close.png'; + // closeBtn.alt = '关闭'; + + // if (closeBtn.addEventListener) { + // closeBtn.addEventListener('click', handleClickClose); + // } else { + // // IE8 及以下 + // closeBtn.attachEvent('onclick', handleClickClose); + // } + + tip.style.position = 'relative'; + tip.style.backgroundColor = 'yellow'; + tip.style.color = 'red'; + tip.style.position = 'fixed'; + tip.style.top = 0; + tip.style.right = 0; + tip.style.left = 0; + tip.style.padding = '5px 20px'; + tip.style.fontSize = '14px'; + + if (sys.ie) { + browser = 'IE'; + tip.innerHTML = contentHTML; + startAppend(); + } + if (sys.firefox) { + browser = 'Firefox'; + } + if (sys.chrome) { + browser = 'Chrome'; + + var getChromeVersion = function () { + var arr = navigator.userAgent.split(' '); + var chromeVersion = ''; + for (var i = 0; i < arr.length; i++) { + if (/chrome/i.test(arr[i])) chromeVersion = arr[i]; + } + if (chromeVersion) { + return Number( + chromeVersion.split('/')[1].split('.')[0] + ); + } else { + return false; + } + }; + + if (getChromeVersion()) { + var version = getChromeVersion(); + // 如果 360 极速浏览器并切换到极速模式低于86版本 + if (version < 87) { + tip.innerHTML = + '您当前使用的浏览器版本过低，使用可能会出现界面显示异常或功能无法正常使用等问题，建议下载使用谷歌，火狐，edge等新版本浏览器。'; + startAppend(); + } + } + } + if (sys.opera) { + browser = 'Opera'; + tip.innerHTML = contentHTML; + startAppend(); + } + if (sys.safari) { + browser = 'Safari'; + } +})(); diff --git a/template/web/public/index.html b/template/web/public/index.html index d5792f3..1f698c7 100644 --- a/template/web/public/index.html +++ b/template/web/public/index.html @@ -110,109 +110,4 @@ To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> - -