先来看看最基础的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库，这样很低效。
由于如果每次去访问浏览器，浏览器都重新下载资源，由于网络获取资源可能很慢，可能页面久久加载不出来，低效且不友好，故浏览器会缓存资源，以避免每次访问都通过网络去获取资源。
但是，由于浏览器缓存，又会出现新的问题，如果我们部署版本时不更改资源的文件名，浏览器可能认为它没有更新，就会使用它的缓存版本。
这样我们就需要解决两个问题：第一，分离打包文件。第二，解决缓存问题。
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库 }) ] }
主要变动：
添加插件：CommonsChunkPlugin，提取引入的库，并且更名，实现代码分离。
输出上在名字上加了hash，每次打包后，hash值都不一样解决了浏览器缓存的问题。
结果：index.js打包为app.[hash].js，index.js引入的lodash打包为common.[hash].js。这样解决了浏览器缓存问题和实现了静态资源代码和源代码的分离，但是新的问题又出现了。
第一次打包后（注意Asset列下的名字）：
每次我们修改源代码时，再次打包，不仅仅index生成app.[hash].js的hash值发生了变化，
而且common.[hash].js的hash值与app的hash值相同也发生了变化（可以自行测试一下，先webpack打包一次，修改index.js后再次打包一次）。
这并不是我们想要的结果，虽然源代码hash改变解决了浏览器使用缓存版本的问题，但是，如果common.js的hash值也一同发生了变化的话，那么浏览器也还需要每次都请求不会发生改变的静态代码common，这样还是浪费了网络资源，很低效。
注：本案例会多次打包，dist目录中会生成过多垃圾文件，在实际使用中都使用了CleanWebpackPlugin插件。
复制代码 代码如下:
new CleanWebpackPlugin(['dist']) // 加入在插件数组中，用于在每次打包前，都清空打包文件夹下之前打包的文件。
如果修改了index，仅仅只是生成的app的hash值发生变化，而common的hash值不发生变化，那就能够达到我们的目的，既能缓存库又能识别源文件的更改。
我们进行如下配置： output中将 [name].[hash].js 改为[name].[chunkhash].js ，让每个文件生成唯一的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.optimize.CommonsChunkPlugin({ name: 'common' // 指代index.js引入的lodash库 }) ] }
（注意：不要在开发环境下使用 [chunkhash]，因为这会增加编译时间。将开发和生产模式的配置分开，并在开发模式中使用 [name].js 的文件名，在生产模式中使用 [name].[chunkhash].js 文件名，所以如果这个时候使用了热替换插HotModuleReplacementPlugin，将会导致编译不成功！）
我们配置好之后，进行webpack打包：
chunkhash是根据文件内容生成的hash，可见app与common生成的hash值不相同了（对比使用 [name].[hash].js打包）。
我们在index.js中随便进行修改，再次打包：
奇怪的是，虽然common与app生成了单独的hash值，但是修改了index.js，common的hash值还是发生了变化。