webpack打包其他资源文件
图片打包
file-loader的使用
css内引入图片资源
安装
npm install file-loader -D
outputPath:图片文件打包的放在哪个文件夹下。
name:文件图片打包后的命名方式。
[name]打包后的名字和原文件名一致。
[hash:4]指定hash值得位数,防止文件名字重复。
[ext]打包后的名字和原文件后缀一致。
代码创建元素设置属性依赖图片
若是代码创建img标签,因为img标签有src属性,我们不能手动赋值图片的位置,而是得将资源引入赋值给 src
url-loader的使用
url-loader其实也是和file-loader功能类似,但是url-loader可以将图片设置成对应的base64编码
limit小于limit设定的值,便会转换成base64的编码。大于设定值便会和打包成独立文件
name,outputPath的设置和上面一样。
webpack5内asset打包方式
webpack5开始内部就已经提供了资源模块类型来完成之前提到过loader的工作
asset/resource:匹配到一个文件,导出一个URL。功能实现==> file-loader
asset/resource:匹配到一个文件,导出一个URI。功能实现 没有详细配置的==> url-loader
asset:匹配到一个文件。通过配置文件决定导出URL还是URI==> 具有限制体积的url-loade
asset/source
还是对图片进行打包:
配置
除了在名字上配置好打包路径外还可以配置在 output内
字体打包-字体文件打包
字体文件打包可以借助file-loader 或asset
配置都是类似的
插件的使用
CleanWebpackPlugin的使用
目前我们重新打包,每次都要删除dist文件夹,防止有些文件残留在里面,手动删除太麻烦。我们开始使用插件。
安装 npm install clean-webpack-plugin -D
webpack.config.js内配置 注意插件时需要先引入,才能使用的。
HtmlWebpackPlugin的使用
目前我们的dist文件内没有对应的入口html文件,而是外部应用的,那是不可取的。
安装 npm install html-webpack-plugin -D
这里需要一个html模板,我们这里直接从Vue过程文件里面取出public文件夹。
配置
CopyWebpackPlugin的使用
接下来我们希望将public下的内容也放进dist文件夹内,运用赋值
安装 npm install copy-webpack-plugin -D
mode和devtool的设置
mode:'development'设置开发环境还是生产环境,对应的环境webpack会帮助我们自动加上一些配置。
devtool:'source-map'作用看图说话。
简而言之,就是在浏览器窗口调试时,显示的是webpack打包后的js文件,还是原始文件格式。
标签:文件,url,loader,webpack,打包,file,资源
来源: https://blog.csdn.net/weixin_47529373/article/details/117904393