Vue项目使用webpack打包时纯静态资源的处理

本文介绍如何在Vue项目中使用webpack的CopyWebpackPlugin插件,将地图包等纯静态资源打包到dist目录。在开发过程中,由于地图插件版本问题,需要手动处理。通过安装并配置CopyWebpackPlugin,可以方便地实现文件和文件夹的复制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue项目的开发过程中集成一款地图插件,但地图版本较低,无法通过npm管理,在打包的时候需要把地图包copy到dist目录下,于是使用到了webpack插件CopyWebpackPlugin,
该插件可以在webpack中拷贝文件和文件夹

安装命令为 npm install --save-dev copy-webpack-plugin

创建CopyWebpackPlugin:new CopyWebpackPlugin([patterns], options)

patterns参数如下:

参数是否必填作用其他说明
fromY定义拷贝的源目录from: ‘/Source’
toN定义拷贝的目标目录to: ‘/absolute/[name].[ext]’
不填的话会默认为output.path路径
toTypeN拷贝的类型file or dir or template
forceN强制覆盖先前的版本默认false
contextN上下文from属性的相对路径,但开发过程中from属性常常使用__dirname,从而省略了context
flattenN只拷贝文件,不会把文件夹结构也拷贝过来false
ignoreN忽略拷贝指定的文件可以用模糊匹配
transformNwebpack执行拷贝之前对文件内容进行修改function(content, path) { return content;}


option参数如下

参数默认作用
contextcompiler.options.contextfrom属性的相对路径,适用于所有pattern
ignore[]忽略拷贝指定的文件
copyUnmodifiedfalse在webpack-dev-server构建的时,默认只拷贝修改过的文件,设置为true则拷贝所有
debug'warning''warning':告警信息
'info'/true:文件路径信息以及读取信息
'debug':最详细的调试信息

在webpack.prod.conf.js文件中,webpackConfig变量中添加CopyWebpackPlugin插件:

// copy Map assets
new CopyWebpackPlugin([
    {
        from: path.resolve(__dirname, '../Map'),
        to: config.build.mapDirectory,
        ignore: ['.*']
    }
])




趁着年轻,好好奋斗一把

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值