非打包资源_static

非打包资源_static

1. 需要引入1个插件模块
   • copy-webpack-plugin@5

注意: 非打包的资源, 不再被当做模块使用, 所以我们只能使用路径引入的方式, 不要使用import/require

注意: 引用的相对路径, 要以打包后dist目录中index.html为起点, 来查找static (而且static也会被复制到dist中)

2. 配置插件

new CopyWebpackPlugin([{
    from : __dirname + "/src/static",//从哪个文件夹开始复制
    to : __dirname + "/dist/static"//复制到那个文件夹
}])

1. 在src同级下, 声明static文件夹, 放置我们的静态资源
2. 使用static资源, 需要直接写打包后的相对路径, 项目要打包以后放到服务器上查看

静态资源存放位置	使用在哪里	资源大小	产出到哪里	备注
assets (会被webpack处理)	img标签	超过8KB	dist/生成独立文件	import 图片
assets (会被webpack处理)	img标签	小于8KB	打包进了js中, base64字符串	import 图片
assets (会被webpack处理)	css背景	超过8KB	url’图片路径’	import 图片
assets (会被webpack处理)	css背景	小于8KB	url('base64字符串")	import 图片
assets (会被webpack处理)	i标签	判断10KB/8KB	使用了字体和字体样式(超过限制生成独立文件, 小于限制大小, 打包进js中)	import css样式文件
static (不会被wp处理)	img标签	超过8KB	copy了src同级下static到dist目录中	写static的路径
static (不会被wp处理)	img标签	小于8KB	copy了src同级下static到dist目录中	写static的路径
static (不会被wp处理)	css背景	超过8KB	copy了src同级下static到dist目录中	写static路径
static (不会被wp处理)	css背景	小于8KB	copy了src同级下static到dist目录中	写static路径
static (不会被wp处理)	i标签	不用管	copy了src同级下static到dist目录中	需要在模板index.html中引入css文件

总结:

• 小于8KB的放在assets中, 会被webpack打包进js中, 减少http请求文件的次数, import/require引入静态资源
• 太大的文件, 直接放在static中, 直接引用地址就可以了