山西省煤矿建设协会网站,温州网站制作公司,网站改不了分类,长春市人才网webpack配置排除打包
思路
打包时#xff0c;不要把类似于element-ui第三方的这些包打进来 从网络上#xff0c;通过url地址直接引入这些包
操作
#xff08;1#xff09;先找到 vue.config.js#xff0c; 添加 externals 项#xff0c;具体如下#xff1a;
config…webpack配置排除打包
思路
打包时不要把类似于element-ui第三方的这些包打进来 从网络上通过url地址直接引入这些包
操作
1先找到 vue.config.js 添加 externals 项具体如下
configureWebpack: {// 配置单页应用程序的页面的标题// 省略其他....externals: {/*** externals 对象属性解析。* 基本格式* 包名 : 在项目中引入的名字* */vue: Vue,element-ui: ELEMENT,cos-js-sdk-v5: COS},resolve: {alias: {: resolve(src)}}
}再次运行打包我们会发现包的体积已经大幅减小上面的三个包已经不在打包的目标文件中了。但是对应的项目也跑不起来了 缺少了js文件。
(2在public/index.html中采用外链引入排除的文件
!DOCTYPE html
htmlheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedge,chrome1meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalablenolink relicon href% BASE_URL %favicon.icotitle% webpackConfig.name %/titlelink hrefhttps://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css relstylesheet/headbodynoscriptstrongWere sorry but % webpackConfig.name % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv idapp/div!-- built files will be auto injected --script srchttps://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js /script/body
/html3再次打包。
效果OK
webpack配置排除打包-根据当前环境动态配置
注意在开发项目时文件资源还是可以从本地node_modules中取出而只有项目上线了才需要去使用外部资源。此时我们可以使用环境变量来进行区分。
具体配置-在生产环境时生效
具体如下
动态设置externals
在**vue.config.js**文件中
let externals {}
let cdn { css: [], js: [] }
const isProduction process.env.NODE_ENV production // 判断是否是生产环境
if (isProduction) {externals {/*** externals 对象属性解析* 包名 : 在项目中引入的名字*/vue: Vue,element-ui: ELEMENT,cos-js-sdk-v5: COS}cdn {css: [https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css // element-ui css 样式表],js: [// vue must at first!https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js, // vuejshttps://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js, // element-ui jshttps://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js, // xlsx]}
}webpack配置externals配置项
configureWebpack: {// 配置单页应用程序的页面的标题name: name,externals: externals,resolve: {alias: {: resolve(src)}}
}注入配置到html模板
1
在vue.config.js中设置config.plugin(html)如下4项
chainWebpack(config) {config.plugin(preload).tap(() [{rel: preload,fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],include: initial}])// 省略其他......// 注入cdn变量 (打包时会执行)config.plugin(html).tap(args {args[0].cdn cdn // 配置cdn给插件return args})// 省略其他...
}2
找到 public/index.html 通过配置CDN Config 依次注入 css 和 js。内容如下
!DOCTYPE html
htmlheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedge,chrome1meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalablenolink relicon href% BASE_URL %favicon.icotitle% webpackConfig.name %/title% for(var css of htmlWebpackPlugin.options.cdn.css) { %link relstylesheet href%css%% } %/headbodynoscriptstrongWere sorry but % webpackConfig.name % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv idapp/div!-- built files will be auto injected --% for(var js of htmlWebpackPlugin.options.cdn.js) { %script src%js%/script% } %/body
/html
打包 检查效果
npm run build:prod% for(var js of htmlWebpackPlugin.options.cdn.js) { % % } % #### 打包 检查效果js
npm run build:prod检查生成的index.html中是否有css引入和js引入
