Explication détaillée de la bonne manière d'extraire des bibliothèques tierces avec webpack

我们在用webpack打包时，常常想单独提取第三方库，把它作为稳定版本的文件，利用浏览缓存减少请求次数。常用的提取第三方库的方法有两种

1. CommonsChunkPlugin
2. DLLPlugin

区别：第一种每次打包，都要把第三方库也运行打包一次，第二种方法每次打包只打包项目文件，我们只要引用第一次打包好的第三方压缩文件就行了

CommonsChunkPlugin方法简介

我们拿vue举例

const vue = require('vue')
{
 entry: {
 // bundle是我们要打包的项目文件的导出名字， app是入口js文件
 bundle: 'app',
 // vendor就是我们要打包的第三方库最终生成的文件名，数组里是要打包哪些第三方库, 如果不是在node——modules里面，可以填写库的具体地址
 vendor: ['vue']
 }
 output: {
  path: __dirname + /bulid/','
 // 文件名称
 filename: '[name].js'
 }
 plugins: {
 // 这里实例化webpack.optimize.CommonsChunkPlugin构造函数
 // 打包之后就生成vendor.js文件
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

然后打包生成的文件引入到html文件里面

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

DLLPlugin方法简介

首先准备两个文件

1. webpack.config.js
2. webpack.dll.config.js

webpack.dll.config.js文件配置如下

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')
module.exports = {
 entry: {
 vendors: ['vue', 'vuex']
 }
 output: {
 filename: '[name].dll.js',
 path: 'dist/','
 library
 }
 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, 'dist')/[name]-manifest.json'),
  // Cela doit correspondre à l'option output.library ci-dessus
  name: library
 }),
 ],
}

Voici la configuration du fichier webpack.config.js

const webpack = require('webpack')
module.exports = {
 entry: {
 app: '.',/src/index
 }
 output: {
 filename: 'app.bundle.js',
 path: 'dist/','
 }
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendors-manifest.json')
 }
 ]
}

Ensuite, exécutez

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

mode d'implémentation HTML

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

Voici la totalité du contenu de cet article, j'espère qu'il vous sera utile dans vos études, et j'espère que vous soutenirez également le tutoriel criant.

Déclaration : Le contenu de cet article est extrait du réseau, propriété de l'auteur original, contribué et téléchargé par les utilisateurs d'Internet. Ce site ne détient pas de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu présumé enfreindre les droits d'auteur, vous êtes invité à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu présumé enfreindre les droits d'auteur.)