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.jsvar oImg = new Image();oImg.src = require('../img/welcometocat.png');//当成模块引入图片document.body.appendChild(oImg);

webpack一下即可~