webpack图片打包（file-loader&&url-loader）(css文件中，以及html文件中)

在这个地方由于不同文件类型中的引用方式和file-loader的配置方式折腾了好半天。所以记录下来最终折腾出来的配置方法以及引用方式。

1. 安装。npm install file-loader –save-dev

2. webpack.config .js 的配置

// publicPath 这里配置指向最终的生产目录，bundle.js所在的文件夹
output: {
path:__dirname + '/build',
publicPath: '/webBlog/build/',
filename:'bundle.js'
},

// loader 的配置
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
query:{
name:'img/[name]-[hash:5].[ext]'  //这里img是存放打包后图片文件夹，结合publicPath来看就是/webBlog/build/img文件夹中，后边接的是打包后图片的命名方式。
}
},

css 文件中的引用

.hd {
height: 200px;
background: url("../../img/lance.jpg") no-repeat center center;
background-size: 100%;
}

模板中的引用：开发的时候所在的路径用require引入，file-loader会按照配置路径打包到配置的文件夹。

<img src={require("../../img/233.jpg")} alt=""/>

简单介绍下url-loader的配置

其实跟file-loader相比差不多，url-loader会按照配置把小于一定大小的图片以dataUrl的形式储存。

引用方式与上面相同：loader的配置如下：

{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8000&name=img/[name]-[hash:5].[ext]',//小于8kb的图片以dataurl的方式存储

}

补充一个：如何打包html文件中的图片呢？

首先安装相应的loader：

$ npm install html-withimg-loader --save-dev

在webpack.config.js中做相应的配置：

module: {
　　loaders: [
　　　　{
　　　　　　test: /\.html$/,
　　　　　　loader: 'html-withimg-loader'
　　　　}
　　]
}

最后在入口的js文件中引入html

import '../index.html';

over。