为了方便维护和交流,文档统一迁移到语雀: https://yuque.com/easy-team. 该文档不再更新维护

CDN 配置

基本配置

easywebpack 提供了 cdn 配置节点, 只需要配置 cdn 地址即可(cdn地址会覆盖publicPath地址).配置如下:

// ${app_root}/webpack.config.js module.exports = { ...... cdn:{ url: 'http://xxx.cdn.com' } done(){ // upload static file to cdn: http://xxx.cdn.com } } 

实战配置

注意:实际项目具体做法一般是只有上线部署才使用 cdn 生效. 我们可以在 Webpack 构建完成后, 在 done 函数里面上传静态资源到 cdn.url 地址. 我们可以通过添加环境变量的方式决定是否需要上传CDN, 从而控制本地开发构建不上传CDN, 只有在CI构建(CI环境里面定义UPLOAD_CDN环境变量)时才触发CDN流程.

// ${app_root}/webpack.config.js const UPLOAD_CDN = process.env.UPLOAD_CDN; module.exports = { ...... cdn:UPLOAD_CDN ? { url: 'http://xxx.cdn.com/public/' }: {}, done(){ // upload static file to cdn: http://xxx.cdn.com if(UPLOAD_CDN){ } } } 

打包配置

packjson.json 本地打正式包配置

npm run build 打正式包的时候, 开启 UPLOAD_CDN 开关

 { "script" :{ "build:dev": "cross-env easywebpack build dev", "build:test": "cross-env easywebpack build test", "build": "cross-env UPLOAD_CDN=true easywebpack build prod" } } 

packjson.json CI 打正式包配置

这里无需配置 UPLOAD_CDN 参数, 请在 CI 系统配置 UPLOAD_CDN 环境变量

 { "script" :{ "build:dev": "cross-env easywebpack build dev", "build:test": "cross-env easywebpack build test", "build": "cross-env easywebpack build prod" } }