webpack 打包图片

  • 1.在JS中创建图片引入

    错误处理

    1
    2
    3
    let image = new Image();
    image.src = './love.png';
    document.body.appendChild(image);
1
2
3
4
5
6
7
8
9
10
11
12
// 安装file-loader 
yarn add file-loader -D

//webpack.config.js
module:{
rules:[
{
test:/\.(png|jpg|gif|jpeg)$/,
use:'file-loader'
},
]
}

正确处理

1
2
3
4
5
//#file-loader 默认会在内部生成一张图片到build目录下,把生成的图片名字返回回来
import love from './love.png';//把图片引入,返回结果是新的图片地址
let image = new Image();
image.src = love;
document.body.appendChild(image);
  • 2.在CSS中 background(‘url’)
    可以直接使用,因为已经引入了css-loader

  • 3.<img src=''>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 安装html-withimg-loader 
    yarn add html-withimg-loader -D

    //webpack.config.js
    module:{
    rules:[
    {
    test:/\.html$/,
    use:'html-withimg-loader'
    },
    ]
    }

优化

  • 做一个限制,当我们的图片小于多少K的时候用base64来转化,否则使用file-loader 产生真实的图片
  • 不需要单独设置file-loader
  • base64 不会进行http请求,但是源文件大小会大1/3左右
1
2
3
4
5
6
7
8
9
{
test:/\.(png|jpg|gif|jpeg)$/,
use:{
loader: "url-loader",
options:{
limit: 200*1024
}
}
}

打包

  • 很多种方法都可以,这里举例两种
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    //publicPath
    output: {
    filename: "wenzhe.[hash:4].js", //打包文件名
    path: path.resolve(__dirname,'dist'),//路径必须是绝对路径,习惯性加__dirname 以当前路径下
    publicPath: "http://huwenzhe.com/"
    }

    //outputPath
    use:{
    loader: "url-loader",
    options:{
    limit: 200*1024,
    outputPath:'img/'
    }
    }