webpack打包图片文件

打包图片文件

url-loader

在 webpack 中引入图片需要依赖 url-loader 这个加载器。
安装：npm install url-loader --save-dev
在 webpack.config.js 文件中配置如下：

module: {
　　loaders: [
　　　　{
　　　　　　test: /\.(png|jpg)$/,
　　　　　　loader: 'url-loader?limit=8192'
　　　　}
　　]
}    

test 属性代表可以匹配的图片类型，除了 png、jpg 之外也可以添加 gif 等，以竖线隔开即开。

loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。

JS中的图片

通过模块化的方式引用图片路径，这样引用的图片就可以成功打包进 bundle 文件夹里了
ex

var imgUrl = require('./images/bg.jpg'),
    imgTempl = '<img src="'+imgUrl+'" />';
document.body.innerHTML = imgTempl;

HTML中的图片

安装插件：npm install html-withimg-loader --save-dev

编译后img资源404

output: {//出口文件
        filename: 'bundle.js',//文件名
        publicPath: './dist/',
    },

image