webpack打包将public目录下的文件复制在打包后的build目录中
·
平时我们在进行前端开发时,往往会需要用到许多插件,例如viewerjs、ueditor、highChart等等。可是在打包代码的时候我们并不需要将这个插件也进行打包【他们并没有模块化,通常是个js插件】,所以每次打完包后我们得手动复制文件到build目录下很麻烦。
针对这些不需要打包压缩的js插件,我查阅资料,了解到一个webpack配置使用的插件,copy-webpack-plugin。
一、copy-webpack-plugin介绍
copy-webpack-plugin插件作用是在用webpack进行打包代码时,可以将指定目录下的文件原样复制到另一个指定目录下【默认是打包后的目录下】。
二、用法步骤
1、在项目根目录下创建public目录用于存放不需要打包的js插件以及一些ico图标。

2、在webpack.config.js中的plugins属性下配置copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin');
...
plugins: [
new CopyWebpackPlugin([
'public'
])
]
官网文档上用法还有很多,如:
new CopyWebpackPlugin([{
from: path.resolve(__dirname, 'public'),
to: path.resolve(__dirname, 'build')
}]),
new CopyWebpackPlugin({
patterns: [{
from: path.resolve(__dirname, 'public'),
to: path.resolve(__dirname, 'build')
}]
}),
要了解详情可跳转:copy-webpack-plugin
但是在实际运用的时候却都没有生效,结果查阅相关资料,最坑的地方出现了,原来得把copy-webpack-plugin插件版本回退到5.0.0,默认npm i会下载10.0.0版本的
果然重新npm i copy-webpack-plugin@5.0.0就可以了。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)