webpack配置url-loader及使用

最新推荐文章于 2024-05-09 09:54:56 发布

LoveMe_LoveMyDog

最新推荐文章于 2024-05-09 09:54:56 发布

阅读量884

点赞数 1

文章标签： webpack

本文链接：https://blog.csdn.net/LoveMe_LoveMyDog/article/details/115566476

版权

在webpack-config.js里面配置一个module，在rules下配置，
test里面是正则表达式，loader里面写url-loader，options里面的limit是限制上传的大小，比如你的图片是8K,传过去就是8K*1024。这里注意,当加载的图片，小于limit时，会将图片编译成base64字符串的形式.当加载的图片，大于limit时，需要file-loader模块进行加载(file-loader不需要配置)。听说在实际项目中8K的比较多…
然后你就这终端，也可以在控制台安装url-loader和file-loader了。npm install --save-dev url-loader，这个是安装最新的，你也可以在后面加个@，然后输入版本，比如npm install --save-dev url-loader@1.1.2这个就是安装url-loader的1.1.2版本
最后就是这个name，name的作用就是，你的图片大小大于limit的限制过后，就会用file来进行打包，打包过去就直接在你要打包到的目标文件了，在页面里面不会显示它，而且它打包过去还是以hash命名的（32）。name:'img/[name].[hash:8].[ext]'name就是让他在目标文件下创建一个指定的文件，[]里面写name，文件的名字和之前的一样，加上哈市值（8位），扩展名ext，如果不加[],直接写img/name，以后所有的图片就叫name.****
补充下，还需要在webpack-config.js里面配置这个：

publicPath，表现以后所有涉及到url的，都会加上一个它。