189 8069 5689
这篇文章将为大家详细讲解有关webpack如何独立打包和缓存处理，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
站在用户的角度思考问题，与客户深入沟通，找到库车网站设计与库车网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广、空间域名、网页空间、企业邮箱。业务覆盖库车地区。
webpack最基本的配置文件来打包压缩我们的代码：
var path = require('path');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}在入口文件index.js中我们引入了jQuery：
// index.js
var $ = require('jquery');
var str = require('./hello.js');
function main() {
$('body').html(str);
}
main();这样我们虽然能够实现代码的统一打包，将jQuery、index.js、hello.js统统打包到了bundle.js里，但是会存在一个问题：每次打包都会生成一个体积较大的新bundle.js，浏览器无法缓存像jQuery这样的基本不会改动的框架库代码文件，影响加载速度。
发现问题我们就来解决问题，我们最终希望的是将像jQuery这样的框架库代码与项目自身的代码分开打包，生成一个独立的打包文件，缩减单个文件体积，浏览器也不用每次都进行加载。
步骤
1、独立打包
为了解决上述问题，我们需要修改我们的webpack配置文件：
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
main: './app/index.js',
vendor: ['jquery']
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
]
}上方我们将原本的单入口文件改成了多入口文件，并加入了vendor属性。vendor属性用于配置打包第三方类库，写入数组的类库名将统一打包到一个文件里。
同时我们将输出的filename用[name]变量来自动生成文件名，最后我们添加了一个CommonsChunkPlugin的插件，用于提取vendor。
配置完成后我们运行webpack命令：
Hash: ee1daf95c1986768927a
Version: webpack 2.3.2
Time: 573ms
Asset Size Chunks Chunk Names
main.js 340 bytes 0 [emitted] main
vendor.js 274 kB 1 [emitted] [big] vendor
[0] ./~/jquery/dist/jquery.js 267 kB {1} [built]
[1] ./app/hello.js 53 bytes {0} [built]
[2] ./app/index.js 114 bytes {0} [built]
[3] multi jquery 28 bytes {1} [built]最终发现我们成功将jQuery打包到了vendor.js中，实现了独立打包，但是问题又来了：每次打包后生成的文件名都是一样的，浏览器可能缓存上一次的结果而无法加载最新数据。
2、添加hash
为了解决上述问题，我们需要为打包后的文件名添加hash值，这样每次修改后打包的文件hash值将改变，修改配置文件如下：
module.exports = {
...
output: {
filename: '[name].[chunkHash:5].js',
path: path.resolve(__dirname, 'dist')
},
...
}上方我们在输出文件名中增加了[chunkHash:5]变量，表示打包后的文件中加入保留5位的hash值。我们再次运行打包命令：
Hash: c7d1295f2f9a27c412d2
Version: webpack 2.3.2
Time: 603ms
Asset Size Chunks Chunk Names
main.2a7ad.js 337 bytes 0 [emitted] main
vendor.49eb4.js 274 kB 1 [emitted] [big] vendor
[0] ./~/jquery/dist/jquery.js 267 kB {1} [built]
[1] ./app/hello.js 50 bytes {0} [built]
[2] ./app/index.js 114 bytes {0} [built]
[3] multi jquery 28 bytes {1} [built]上方我们发现打包后的文件成功加上了hash值，这样每次修改文件后hash值也会跟着变，就不怕浏览器缓存了，但是当我们尝试去修改一个js文件后再次打包，问题又来了：vendor.js的hash值也变了，我们并没有修改jQuery的源码。
3、修改vendor配置
上述问题产生的原因是因为CommonsChunkPlugin插件是用于提取公共代码的，上方我们只是提取了vendor作为公共代码。为了继续解决上述问题，其实方法很简单，我们需要修改CommonsChunkPlugin的配置，如下：
module.exports = {
...
plugins:[
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
]
...
}如此我们修改一下hello.js中的代码，发现vendor的hash值并未改变，并且多了一个manifest.js的小文件。manifest.js为webpack的启动文件代码，它会直接影响到hash值，用mainfest单独抽出来了，这样vendor的hash就不会变了。
4、生成index.html
通过以上对webpack配置文件的一系列修改，我们成功实现了webpack的独立打包与缓存处理，但是还差最后一步。
因为我们最终打包后生成的文件名中带有hash值，每次都是会变的，所以我们不能像目前这样在index.html中写死路径。
index.html
