@bdlite/webpack5-qcdn-plugin

@q/webpack4-qcdn-plugin

支持 chunk file、dll 的 Webpack4 qcdn 上传插件。

本插件仅仅是对 webpack4-cdn-plugin 的一层包装，注意上传文件使用的是 qcdn.content 方法。 如有其他需要，请自行封装。

如果你的项目是基于 @vue/cli v.3.4+ 的，注意构建时请不要使用--modern 选项。因为 modern 和 legacy 两次构建是在不同的进程中运行的。（参考 CHANGELOG）

安装

npm install @q/webpack4-qcdn-plugin --registry=http://registry.npm.qiwoo.org/

webpack 版本

版本	支持程度
webpack 4	支持绝大多数场景
webpack 3	基本支持 （欢迎反馈问题）

注意事项

• 插件顺序很重要，请在 uglifyjs-webpack-plugin 或其他压缩插件之前使用本插件

• 建议使用 Node 8+。

• 千万不要设置 output.publicPath！！！！

• 插件只在 production mode 生效。（process.env.NODE_ENV 设置为 production）

配置使用

在 webpack 配置文件中引入，并初始化。令配置对象为 config，则其可分为两部分（全部非必传）：

• config.qcdnOption: @q/qcdn 配置对象

• config.maxRetryCount: 上传出错后，允许重试的次数（默认 5 次）

• config.concurrency: 文件上传并发数量（默认为 5）

• config.cachePath：缓存文件位置

• config.preUpload (since v1.5.0)：上传前 hook，如果缓存命中则不会执行，详见下面的示例

• config.postUpload (since v1.5.0)：上传后 hook，如果缓存命中则不会执行，详见下面的示例

• 其余字段：webpack4-cdn-plugin 的各项配置（后面有附录）

const Webpack4QCDNPlugin = require('@q/webpack4-qcdn-plugin')

// 注意只能在 production 环境下使用！！！！
if (process.env.NODE_ENV === 'production') {
  const plugin = new Webpack4QCDNPlugin({
    // qcdn 配置，详见 http://qnpm.qiwoo.org/package/@q/qcdn
    qcdnOption: {
      https: true
    },

    // 文件上传并发数量
    concurrency: 5,

    // 上传出错后允许重试的次数
    maxRetryCount: 5,

    // 缓存文件地址，默认为  `${process.cwd()}/node_modules/.cache/qcdn_cache.json`
    // 如果传 `false` 则不使用缓存
    cachePath: 'node_modules/.cache/qcdn_cache.json',

    async preUpload ({ file, content, extname }) {
      // A. 不上传
      return false

      // B. 自己操作上传并返回 url 结果
      return 'https://my.domain/path/to/file.ext'

      // C. 只有明确返回 true 才会进行下一步 qcdn 上传!!!
      return true
    },

    // 只有 preUpload 返回 true 才会执行到这里
    async postUpload ({ url, file, content, extname })) {
      // 注意 url 可能为 undefined （qcdn 上传失败）
      if (!url) {
        return false
      }

      // A. 丢弃上传结果
      return false

      // B. 对 url 进行处理
      return url.replace(/^https?:/, '');

      // C. 使用 url
      return url
      return true
    },

    // 其他配置项见 https://github.com/AngusFu/webpack4-cdn-plugin
    // ...
  })

  module.exports.plugins.push(plugin)
}

附：webpack4-cdn-plugin 配置

const WebpackCDNPlugin = require('webpack4-cdn-plugin')

module.exports = {
  // ... other fields
  plugins: [
    // ...other plugins
  ]
}

if (process.env.NODE_ENV === 'production') {
  const cdnPlugin = new WebpackCDNPlugin({
    // 是否在本地保留 webpack 生成的文件，默认 `false`
    keepLocalFiles: false,

    // 是否在本地保留 webpack 生成的 sourcemap，默认 `false`
    keepSourcemaps: false,

    // 是否在本地备份 url 替换前的 HTML文件，默认 `false`
    backupHTMLFiles: true,

    // 生成的 JSON 文件，内容为上传前后的 url 映射关系 (`String | false`)
    manifestFilename: 'manifest.json',

    // 用于保存 url 映射关系的全局变量名称
    assetMappingVariable: 'webpackAssetMappings'

    // ...
  })

  module.exports.plugins.push(cdnPlugin)
}