شرح مفصل حول كيفية استخراج المكتبات الثالثة بشكل صحيح باستخدام 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'),
  // هذا يجب أن يتطابق مع خيار output.library أعلاه
  name: library
 }),
 ],
}

ثم تكوين ملف 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')
 }
 ]
}

ثم تشغيل

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

طريقة الاستدلال html

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

هذا هو نهاية محتويات هذا المقال، نأمل أن تكون قد ساعدتكم في التعلم، ونأمل أيضًا أن تشجعوا دائمًا تعليمات النداء.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتويات مملوكة للكتاب الأصلي، تم جمع المحتويات بشكل تلقائي من قبل مستخدمي الإنترنت وتحميلها بشكل مستقل، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي ولا يتحمل الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لتقديم الشكوى، وقدم الأدلة ذات الصلة، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.