"webpack进阶——缓存与独立打包的用法"
Webpack 是一款强大的模块打包工具，用于将JavaScript应用中的各种资源（如JS、CSS、图片等）转换和打包成可部署的静态资源。在基础配置中，Webpack 将入口文件（entry）打包成单一的输出文件（output），例如`bundle.js`。然而，这种简单的打包方式并不利于优化，特别是当项目引入了像lodash这样的常用库时，每次更新代码都会导致整个bundle被重新下载，即使库文件并未改变。
浏览器为了提高加载速度，通常会缓存资源。然而，这也带来了问题：当部署新版本时，如果不更改文件名，浏览器可能会继续使用缓存的旧版本，导致用户无法看到最新的应用状态。为了解决这个问题，我们需要实现缓存管理和独立打包。
首先，针对缓存问题，Webpack 提供了`[hash]`或`[chunkhash]`来动态生成文件名，确保每次构建时生成的文件名不同。例如，在output.filename中使用`[name].[hash].js`，这样每次构建后，每个输出文件的名字都会包含一个基于文件内容的哈希值。当文件内容改变时，哈希值也会随之改变，从而触发浏览器重新下载资源。
其次，为了分离打包文件，我们可以使用`CommonsChunkPlugin`插件。这个插件允许我们将多个入口点共有的模块提取出来，形成一个单独的“公共”chunk，比如`common.js`。在示例配置中，我们定义了两个入口点：`common`（用于lodash）和`app`（用于应用的主入口）。`CommonsChunkPlugin`会识别出`common`中引用的lodash，并将其从`app.js`中分离出来，这样lodash只需要被下载一次，多个页面可以复用。
```javascript
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
common: ['lodash'], // 公共模块，如lodash
app: './src/index.js' // 应用主入口
},
output: {
filename: '[name].[hash].js', // 输出文件名，包含哈希值
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({ // 提取公共模块
name: 'common' // 指定公共模块名称
})
]
};
```
通过这种方式，我们解决了两个问题：一是通过哈希命名策略让浏览器知道何时需要更新资源；二是通过`CommonsChunkPlugin`优化加载效率，减少了不必要的重复下载。这都是Webpack 进阶配置中的重要知识点，对于提升应用性能和用户体验有着显著的效果。
我的内容管理
展开
