Original link: https://callmesoul.cn/xiao-cheng-xu-jing-tai-zi-yuan-wu-feng-zhuan-yi-dao-teng-xun-yun-cos-shi-yong-wepy-mpvue-deng-webp ackda-bao-de-xiao-cheng-xu-xiang-mu/

Today’s tool iswecos

  • Native applet

Native applets operate directly according to the article of WeCos. WeCos provides uploading local resource files to COS, replacing the reference local path of applets with upload path, etc.

I won’t go into detail here, but I’ll focus on the Webpack packaged applet project.

Because native writing is very inconvenient.

  • Webpack applet package project

    It is best to carry on this step again after the development, the early stage concentrates on the development.

    In my earlier development, I used relative paths to reference static resources, but absolute paths should also work.

    After the project is completed

    1. Webpack set the CDN address after packaging, Webpack rules option:

      { test: /\.(png|jpg|jpeg|gif|svg)$/, use: { loader: 'file-loader', options: { name: '/[path][name].[ext]', publicPath: Function (file) {if(isProduction){function (file) {if(isProduction){ If (file.indexOf('tabbar')>=0){// If there is a tabbar, the tabbar is stored in a tabbar folder, because tabbar images are local only. return file; } else{ return 'https://xxx-1234567.cos.ap-guangzhou.myqcloud.com/'+file; // The domain name of your Tencent Cloud COS bucket. } }else{ return file; }}}},},
    2. The installationwecos

      npm install -g wecos

    3. Follow directory creationwecos.config.jsonfile

    4. Fill in the wecos.config.json configuration

      { "appDir": "./dist/assets", "cos": { "secret_id": "xxxxx", "secret_key": "xxxxx", "bucket": "Xxx-1234567 ",//bucker-appid "region": "ap-guangzhou", // select "folder" when creating bucket: "xxx-1234567",//bucker-appid "region": "ap-guangzhou", }, "UploadFileUffix ": [".jpg",".png",".gif",".webp",".svg"]," UploadFileBlackList ": [/ / do not upload pictures, fill in the tabbar directory ". / dist/assets/images/tabbar ",]}
    5. Run in the root directorywecosCan.

  • conclusion

  • Why notwebpackthepublicPathwithfile-loaderthepublicPath ？

    Because Webpack’s publicPath only supports strings, if you change it to an online domain, all static resource prefixes will become CDN domains. The tabbar in the small town does not support network images, nor does Base64, which only supports local images.

    Here we use the publicPath of the file-loader, which supports functions and returns filenames, and we can write conditions to filter out the tabbar’s files.

    Make tabbar files local, while other files use the online CDN domain name.

  • Why do we use it?wecos?

    Of course, you can also manually upload the COS background after packaging locally instead of yourself.

    Then delete the local image file (except the image of tabbar).

    The developer tool then uploads the code.

    You may find this step cumbersome.

    After using WeCOS, we just need to run COS after packaging, we can automatically upload the local CDN, and automatically delete the local (except Tabbar pictures).

    Is it more convenient?

    Use it on your project!