17 webpack图片的处理

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了17 webpack图片的处理，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含929字，纯文字阅读大概需要2分钟。

内容图文

图片的处理

相关操作

main.js

//这个是CommonJS的模块化  浏览器不认识
//需要使用webpack打包
const {add,mul}=require('./js/mathUtils.js');
console.log(add(1, 2));
console.log(mul(3, 2));
//3 依赖css文件 需要安装对应的loader
require('./css/normal.css');

normal.css

body{
   background-color: rebeccapurple;
   background: url("../img/hlw.jpg");
}

webpack.config.js

const path=require('path');

module.exports= {
 entry: './src/main.js',
 output: {
   //绝对路径
   path:path.resolve(__dirname,'dist'),
   filename:'bundle.js',
   //图片打包到这里了，所以需要更改路径
   publicPath:'dist/'
 },
 module:{
   rules:[
     {
       //正则表达式
       test: /\.css$/,
       //css-loader只负责将css文件进行加载
       //style-loader负责将样式添加到DOM中
       //使用多个loader中，是从右向左的
       use:['style-loader','css-loader']
     },
     {
       test:/\.(png|jpg|jpeg|gif)$/,
       use:[
         {
           loader:'url-loader',
           options:{
             //当加载的图片，小于limit时，会将图片编译成base64字符串格式
             //大于limit时，需要使用file-loader  只需要安装  不用配置
             limit:81920
           }
         }
       ]
     }
   ]


 }
};

内容总结

以上是互联网集市为您收集整理的17 webpack图片的处理全部内容，希望文章能够帮你解决17 webpack图片的处理所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---