WebPack详细入门教程（六）之图片打包处理

配置文件（webpack.config.js）

1. limit = 后面跟的是数字，加上这个参数，图片文件大小（单位为byte）将小于8192byte的图片转成base64编码的形式，减少http请求。

2. name 是表示文件被处理之后再目录中的路径和图片生成规则

3. 以下三个参数可以自由组合，改变图片被处理有生成的文件名等信息
[name]表示图片文件的文件名
[ext]表示图片文件的扩展名
[hash]表示图片文件的哈希值

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + '/demo/js/main.js', //入口文件
    output: { //输出文件
        filename: 'index.js', //输出文件名
        path: __dirname + '/out', //输出文件路径
        publicPath:'out/'  //指定静态资源 (图片等) 的发布地址
    },
    module: {
        // rules为数组，保存每个加载器的配置
        rules: [
            //解析图片
            {   
                test: /.(jpg|png|gif|svg)$/,
            　　loader: 'url-loader?limit=8192&name=[name].[ext]?[hash]'      
            }　　　
        ]　
    }
}

注：publicPath它用来指定静态资源 (图片等) 的发布地址, 当配置过该属性后，打包文件 (也就是index.js) 中所有通过相对路径引用的资源都会被配置的路径所替换。

---

main.js中引入图片

将图片放置于 .\demo\img\下后编辑main.js

//main.js

var oImg = new Image();
oImg.src = require('../img/welcometocat.png');//当成模块引入图片
document.body.appendChild(oImg);

webpack一下即可~