webpack打包缓存_webpack独立打包和缓存处理详解

前言

先前写了一篇webpack入门的文章《webpack入门必知必会》，简单介绍了webpack拆分、打包、压缩的使用方法。本文将在上篇文章的基础上进一步讲解在使用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这样的框架库代码与项目自身的代码分开打包