من v3 إلى v4

يعرض هذا الدليل التغييرات الكبيرة التي تؤثر في المستخدمين مباشرة. لمزيد من التفاصيل، راجع سجل التغييرات.

Node.js v4

إذا كنت ما زلت تستخدم Node.js v4 أو إصدارًا أقدم، فيجب ترقية Node.js إلى v6 أو أحدث.

يمكنك العثور على تعليمات ترقية Node.js هنا.

CLI

انتقلت CLI إلى حزمة منفصلة اسمها webpack-cli. يجب تثبيتها قبل استخدام webpack. راجع الإعداد الأساسي.

يمكنك العثور على دليل التثبيت هنا.

تحديث plugins

كثير من plugins الخارجية تحتاج إلى التحديث إلى أحدث الإصدارات حتى تعمل مع webpack 4. يمكنك العثور على روابط plugins الشائعة هنا.

mode

أضف خيار mode الجديد إلى الإعدادات. اضبطه على 'production' أو 'development' أو 'none' حسب نوع الإعداد لديك.

webpack.config.js

module.exports = {
  // ...
+  mode: 'production',
}

plugins المهملة أو المحذوفة

يمكنك إزالة هذه plugins من الإعدادات لأنها أصبحت افتراضية في وضع الإنتاج:

webpack.config.js

module.exports = {
  // ...
  plugins: [
-    new NoEmitOnErrorsPlugin(),
-    new ModuleConcatenationPlugin(),
-    new DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") })
-    new UglifyJsPlugin()
  ],
}

هذه plugins أصبحت افتراضية في وضع التطوير:

webpack.config.js

module.exports = {
  // ...
  plugins: [
-    new NamedModulesPlugin()
  ],
}

هذه plugins كانت deprecated ثم أُزيلت:

webpack.config.js

module.exports = {
  // ...
  plugins: [
-    new NoErrorsPlugin(),
-    new NewWatchingPlugin()
  ],
}

CommonsChunkPlugin

أُزيل CommonsChunkPlugin. استخدم بدلًا منه خيارات optimization.splitChunks.

راجع توثيق optimization.splitChunks لمزيد من التفاصيل. قد تكون الإعدادات الافتراضية مناسبة لاحتياجك أصلًا.

import() وCommonJS

عند استخدام import() لتحميل module ليس ESM، تغيّر الناتج في webpack 4. الآن تحتاج إلى الوصول إلى الخاصية default للحصول على قيمة module.exports.

non-esm.js

module.exports = {
  sayHello: () => {
    console.log("hello world");
  },
};

example.js

function sayHello() {
  import("./non-esm.js").then((module) => {
    module.default.sayHello();
  });
}

json وloaders

عند استخدام loader مخصص لتحويل ملفات .json، تحتاج الآن إلى تغيير type الخاص بالـ module:

webpack.config.js

module.exports = {
  // ...
  rules: [
    {
      test: /config\.json$/,
      loader: 'special-loader',
+     type: 'javascript/auto',
      options: {...}
    }
  ]
};

إذا كنت ما زلت تستخدم json-loader، فيمكنك إزالته:

webpack.config.js

module.exports = {
  // ...
  rules: [
    {
-     test: /\.json$/,
-     loader: 'json-loader'
    }
  ]
};

module.loaders

أصبحت module.loaders deprecated منذ webpack 2، وأُزيلت الآن لصالح module.rules.