本文介绍了webpack进阶——缓存与独立打包的用法，分享给大家，希望对大家有帮助
先来看看最基础的webpack配置：
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
在index.js中引入了lodash库：
src/index.js：
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
打包之后，只会生成一个bundle.js，这样的话，每次若要加载资源文件，浏览器都会加载根本不会改动的lodash库，这样很低效。
由于如果每次去访问浏览器，浏览器都重新下载资源，由于网络获取资源可能很慢，可能页面久久加载不出来，低效且不友好，故浏览器会缓存资源，以避免每次访问都通过网络去获取资源。
但是，由于浏览器缓存，又会出现新的问题，如果我们部署版本时不更改资源的文件名，浏览器可能认为它没有更新，就会使用它的缓存版本。
这样我们就需要解决两个问题：[b]第一，分离打包文件。第二，解决缓存问题。[/b]
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
common: ['lodash'],
app: './src/index.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // 指代index.js引入的lodash库
})
]
}
主要变动：
[list]
[*]添加插件：CommonsChunkPlugin，提取引入的库，并且更名，实现代码分离。[/*]
[*]输出上在名字上加了hash，每次打包后，hash值都不一样解决了浏览器缓存的问题。[/*]
[/list]
结果：index.js打包为app.[hash].js，index.js引入的lodash打包为common.[hash].js。这样解决了浏览器缓存问题和实现了静态资源代码和源代码的分离，但是新的问题又出现了。
第一次打包后（注意Asset列下的名字）：
[img]http://files.jb51.net/file_images/article/201708/20170802162123104.jpg[/img]
每次我们修改源代码时，再次打包，不仅仅index生成app.[hash].js的hash值发生了变化，
[img]http://files.jb51.net/file_images/article/201708/20170802162124105.jpg[/img]
而且common.[hash].js的hash值与app的hash值相同也发生了变化（可以自行测试一下，先webpack打包一次，修改index.js后再次打包一次）。
这并不是我们想要的结果，虽然源代码hash改变解决了浏览器使用缓存版本的问题，但是，如果common.js的hash值也一同发生了变化的话，那么浏览器也还需要每次都请求不会发生改变的静态代码common，这样还是浪费了网络资源，很低效。
注：本案例会多次打包，dist目录中会生成过多垃圾文件，在实际使用中都使用了CleanWebpackPlugin插件。
[url=https://doc.webpack-china.org/api/module-variables/#module-id-commonjs-]module.id [/url]会基于默认的解析顺序(resolve order)进行增量。也就是说，当解析顺序发生变化，ID 也会随之改变，所以hash值也会发生变化。
有人可能会决定，一般我们都不会更换webpack.config.js中entry的入口顺序，那么是否我就不会遇见这个问题了。答案是否定的，除否你能保证资源文件都写在entry的顶部。否则会出现这样的情况：
假如entry的顺序为： app -> common， 那么解析顺序为 index.js → lodash。 如果之后index.js引入了 print.js，那么解析顺序变为 index.js → print.js -> lodash。
以上，我们并没有在entry中更改入口顺序，解析的顺序还是会发生改变，common的hash还是会发生，不能缓存。
这里我们就引入一个新的组件：[url=https://doc.webpack-china.org/plugins/hashed-module-ids-plugin/]HashedModuleIdsPlugin[/url]：根据hash生成ID（[url=https://doc.webpack-china.org/plugins/named-modules-plugin/]NamedModulesPlugin[/url]也具有同样的效果，但是是根据路径名生成ID，可读性更高，也由此编译时间会相对长一些）。 这样[url=https://doc.webpack-china.org/api/module-variables/#module-id-commonjs-]module.id[/url]就不会使用数字标识符，而使用hash：
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
common: ['lodash'],
app: './src/index.js'
},
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist']),
new webpack.HashedModuleIdsPlugin(), // 引入该插件
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // 指代index.js引入的lodash库
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest' // 用于提取manifest
})
]
}
打包发现，之前[ ]里都是数字，现在都是一些字符，
[img]http://files.jb51.net/file_images/article/201708/20170802162126111.jpg[/img]
接下来，我们再把app和common的顺序调换一下，并且随意修改index.js，再次打包：
[img]http://files.jb51.net/file_images/article/201708/20170802162126112.jpg[/img]
现在大功告成，common的hash没有改变，而因为更变了内容app的hash改变了，这正是我们想要的结果。
[b]参考资料：[/b]
[url=https://doc.webpack-china.org/guides/caching/]webpack文档 -- 缓存[/url]
[url=http://www.1sucai.cn/article/110281.htm]webpack独立打包与缓存处理[/url]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...