Mode

ضبط خيار التخصيص mode يُخبر webpack أن يستخدم تحسيناته المدمجة بما يتناسب مع الوضع المُحدَّد.

string = 'production': 'none' | 'development' | 'production'

الاستخدام

اضبط خيار mode ضمن ملف التخصيص:

export default {
  mode: "development",
};

أو مرّره بوصفه وسيطاً عبر الـ CLI:

webpack --mode=development

القيم النصيّة المدعومة كالآتي:

الخيار	الوصف
`development`	يضبط `process.env.NODE_ENV` على `DefinePlugin` بالقيمة `development`، ويُفعِّل أسماءً وصفيّة مفيدة للوحدات والـ chunks.
`production`	يضبط `process.env.NODE_ENV` على `DefinePlugin` بالقيمة `production`، ويُفعِّل أسماءً مُختصَرة حتميّة (deterministic mangled) للوحدات والـ chunks، إلى جانب `FlagDependencyUsagePlugin` و`FlagIncludedChunksPlugin` و`ModuleConcatenationPlugin` و`NoEmitOnErrorsPlugin` و`MinimizerPlugin`.
`none`	يصرف النظر عن أي خيارات تحسين افتراضية.

إن لم تضبط هذا الخيار، فإنّ webpack يعدّ القيمة production هي الافتراضية لـ mode.

الوضع: التطوير

// webpack.development.config.js
export default {
  mode: "development",
};

الوضع: الإنتاج

// webpack.production.config.js
export default {
  mode: "production",
};

الوضع: لا يوجد

// webpack.custom.config.js
export default {
  mode: "none",
};

إن أردت تغيير السلوك تبعاً للمتغيّر mode داخل ملف webpack.config.js نفسه، فعليك أن تُصدِّر دالّة عوضاً عن كائن:

const config = {
  entry: "./app.js",
  // ...
};

export default (env, argv) => {
  if (argv.mode === "development") {
    config.devtool = "source-map";
  }

  if (argv.mode === "production") {
    // ...
  }

  return config;
};