17 webpack图片的处理

图片的处理

相关操作

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
           }
         }
       ]
     }
   ]


 }
};