rollup打包静态资源

用rollup打包文件时,有时侯需要把一些图片、外部的js资源或字体等等资源一并打包到输出的目录,这时可以使用 rollup-plugin-copy 插件。具体实现步骤如下:

先安装插件

npm i rollup-plugin-copy -D

然后,在rollup.config.js文件引入并使用:

import copy from 'rollup-plugin-copy'

//......省略其它代码

export default {

//......省略其它代码
    plugins: [
       copy({
         targets: [
            {
              src: 'node_modules/element-ui/lib/theme-chalk/fonts/*',
              dest: 'dist/fonts'
            }
          ]
        })
    ]
}

具体的配置说明,可查看文档:Package - rollup-plugin-copy

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Rollup和Webpack是两种常用的JavaScript模块打包工具,用于构建现代化的Web应用程序。它们在一些方面有一些区别。Webpack是一个现代JavaScript应用程序的静态模块打包器,能够打包所有的资源,包括脚本、图片、样式表等一系列内容。它使用loader来处理除了JavaScript以外的资源,将它们转换为Webpack可以处理的有效模块,然后进行打包处理。 相比之下,Rollup更专注于JavaScript模块的打包。它更适用于构建独立的库或组件,并且能够生成更小、更高效的打包结果。Rollup的核心思想是静态分析和tree-shaking,它能够检测未使用的代码并进行剔除,从而减小打包后的文件体积。Rollup还支持ES模块的原生导入和导出语法,使得打包结果更为简洁和可读性更高。 因此,Webpack更适合构建复杂的应用程序,可以处理各种类型的资源并提供丰富的功能和插件生态系统。而Rollup则更适合构建独立的库或组件,能够生成更小、更高效的打包结果,并且支持ES模块的原生导入导出语法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [rollup和webpack的区别](https://blog.csdn.net/qq_43651168/article/details/130805125)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Webpack 和 Rollup:一样但又不同](https://blog.csdn.net/qq_41581588/article/details/125931514)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值