关于对图片的打包

关于对图片的打包

我们之前也说，webpack对与静态资源来说，也是看作模块来加载的。CSS我们是已经看过了，那图片是怎么作为模块打包加载进来呢？这里我们可以想到，图片我们是用url-loader加载的。我们在css文件里的url属性，其实就是一种封装处理过require操作。当然我们还有一种方式就是直接对元素的src属性进行require赋值。

div.img{
	background: url(../image/xxx.jpg)
}

//或者
var img = document.createElement("img");
img.src = require("../image/xxx.jpg");
document.body.appendChild(img);

上述两种方法都会对符合要求的图片进行处理。而要求就是在url-loader后面通过query参数的方式实现的，这里就是说只有不大于8kb的图片才会打包处理成Base64的图片。关于query，请看文档： Query parameters

{test: /\.(jpg|png)$/, loader: "url?limit=8192"}

打包成多个资源文件

我们在开发多页面的站点的时候，还是需要希望能有多个资源文件的。这样我们就可以有效利用缓存提升性能，做到文件按需加载。如何写入口文件，这里就不再赘述了，我们直接看如何对 webpack.config.js 进行修改。

// webpack.config.js

entry: {
	page1: "entry.js",
	page2: "entry2.js"
},
output: {
	path: path.join(__dirname, 'out'),
    publicPath: "./out/",
    filename: '[name].js'
}

这里重点关注两个地方，entry属性可以是一个对象，而对象名也就是key会作为下面output的filename属性的 [name] 。当然entry也可以是一个数组，更多用法都可以去webpack的 官方文档 进行查看。

当然webpack也考虑到公共模块的利用，我们利用插件就可以智能提取公共部分，以提供我们浏览器的缓存复用。我们只需要在 webpack.config.js 添加下面的代码即可。

// 修改添加，webpack.config.js
var webpack = require('webpack');
module.exports = {
	// ....省略各种代码
	    plugins: [
		    new webpack.optimize.CommonsChunkPlugin('common.js')
	    ]
}

我们做个小测试，让第二个入口文件也加载我们之前的 es6-module.js 。然后我们用webpack进行打包，就发现生成的 common.js 里是有相应代码的。我们需要手动在html上去加载 common.js ，并且是 必须要最先加载 。