详解webpack打包第三方类库的正确姿势

Webpack：正确使用第三方类库打包利器CommonsChunkPlugin

Webpack，这款强大的模块打包工具，被广泛应用于前端开发中。对于其高级配置，如CommonsChunkPlugin的使用，却常常让开发者感到困惑。今天，我们就来深入一下这个插件的正确使用方法。

让我们来看一下这个插件的基本配置。假设我们有如下的webpack配置：

设置入口文件为：index对应'./app/main.jsx'，而vendor则包含一些第三方类库如'react', 'react-dom', 'react-router', 'classnames'。输出路径、文件名以及公共路径等也已设定。

在plugins部分，我们使用了webpack.optimizemonsChunkPlugin来打包第三方类库。配置如下：

```javascript

plugins: [

new webpack.optimizemonsChunkPlugin({

names: ['vendor'],

}),

]

```

这个配置看似没有问题，但在实际操作中却存在一个问题。当我们运行程序并修改index入口的任意文件后，即使我们没有修改任何第三方类库，打包出来的vendor.js的文件hash值也会发生变化。这就导致了每次修改index文件都需要重新打包整个vendor，这无疑是不高效的。

那么，如何解决这个问题呢？答案是在CommonsChunkPlugin的配置中加入'manifest'。修改后的配置如下：

```javascript

plugins: [

new webpack.optimizemonsChunkPlugin({

names: ['vendor', 'manifest'], // 加入manifest

}),

]

```

通过加入'manifest'，我们可以解决上述的问题。当再次运行程序并修改index入口文件时，你会发现多出了一个manifest.js文件，而vendor.js的hash值则不再变化。这是因为'manifest'会包含webpack的编译信息，从而确保vendor的hash值只在真正改变时才会更新。这大大提高了打包的效率。那么关于CommonsChunkPlugin更多的细节和底层原理就需要大家进一步去研究和了。以上就是关于webpack的CommonsChunkPlugin插件的正确使用方法的分享，希望对大家有所帮助。也希望大家能多多关注和支持我们的网站狼蚁SEO，我们会持续分享更多有价值的内容。