0.0.7 • Published 1 year ago
webpack-build-cdn v0.0.7
仅仅测试vue单页应用可用，暂时只支持在head里面打包添加 link / script 标签
使用：
通过在不同的环境变量里面去控制，就不用再每次打包前去修改public/index.html 增加或者修改cdn script/link 标签，直接通过打包配置去构建
const WebpackBuildCDN = require('webpack-build-cdn')
const isCDN=process.env.VUE_APP_CDN; // 根据环境变量判断是否开启cdn加载
console.log('====================================isCDN:',isCDN)
const cdns= {
vue: 'Vue',
// vuex: 'Vuex',
// axios: 'axios',
// echarts: 'echarts',
// 右边值在router.js中使用时是router（直接写这个名字会报undefined）
// 应该写 'VueRouter'
// 'vue-router': 'VueRouter',
// 右边值在main.js中使用名字是Element（直接写会报错）
// 应该写ELEMENT-这个值是一个全局变量-跟main.js中引用名字并没有关系
// 'element-ui': 'ELEMENT'
}
module.exports=defineConfig({
...
configureWebpack: {
plugins: [
...
new WebpackBuildCDN({
isCDN: isCDN, // 打包是否开启cdn 默认不开启
cdn:{
js:[
{
src:' https://cdn.bootcdn.net/ajax/libs/vue/3.2.13/vue.runtime.global.prod.min.js',
defer:true,
// async: true
}
]
// css:['www.baidu.com/index.css']
}
})
],
// 配置哪些文件不要打到项目内
externals: isCDN ? cdns: {}
}
...
}）打包结果 dist文件/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="favicon.ico">
<title>vue3_test</title><script type="text/javascript" src= https://cdn.bootcdn.net/ajax/libs/vue/3.2.13/vue.runtime.global.prod.min.js defer ></script>
<script defer src="js/chunk-vendors.js"></script><script defer src="js/app.js"></script></head>
<body>
<noscript>
<strong>We're sorry but vue3_test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>