كيف قمت بحل وتصحيح مشكلتي في Webpack من خلال التجربة والخطأ والمساعدة الخارجية قليلاً.

راجع النص الأصلي على: https://www.instagram.com/p/BdCxrMcn-k5/؟taken-by=riittagirl

أود أن أقول أن هذه كانت رحلة تماما. كنت أعلم أن Webpack لم يكن من السهل تكوينه: هناك العديد من الأجزاء التي تحتوي على العديد من الخيارات ، وهناك npm hell ، وهي تتغير مع الإصدارات الجديدة. لا عجب في أنه يمكن بسهولة أن تصبح مهمة مزعجة لتصحيح الأخطاء عندما لا تسير الأمور كما هو متوقع (أي ، ليس كما في المستندات).

تحاول تصحيح

بدأت رحلة تصحيح الأخطاء بالإعداد التالي:

webpack.config.js

// webpack v4.6.0
const مسار = تتطلب ('مسار') ؛
const HtmlWebpackPlugin = require ('html-webpack-plugin')؛
const WebpackMd5Hash = require ('webpack-md5-hash') ؛
const CleanWebpackPlugin = require ('clean-webpack-plugin')؛
const webpack = تتطلب ('webpack') ؛
module.exports = {
  الإدخال: {main: './src/index.js'} ،
  انتاج: {
    path: path.resolve (__ dirname، 'dist')،
    اسم الملف: '[الاسم]. [chunkhash] .js'
  }،
  devServer: {
    contentBase: './dist' ،
    حار: صحيح ،
    فتح: صحيح
  }،
  وحدة: {
    قواعد: [
      {
        اختبار: / \. js$/ ،
        استبعاد: / node_modules / ،
        استعمال: [
          {loader: 'babel-loader'}،
          {
            اللودر: 'eslint-loader' ،
            خيارات: {
              المنسق: يتطلب ('eslint / lib / formatters / stylish')
            }
           }
         ]
       }
     ]
  }،
  الإضافات: [
    CleanWebpackPlugin ('dist'، {})،
    جديد HtmlWebpackPlugin ({
      حقن: خطأ ،
      التجزئة: صحيح ،
      القالب: './src/index.html' ،
      اسم الملف: 'index.html'
    })،
    WebpackMd5Hash () جديدة
  ]

package.json

{
  "name": "post" ،
  "الإصدار": "1.0.0" ،
  "وصف": ""،
  "الرئيسي": "index.js" ،
  "نصوص": {
    "build": "webpack - إنتاج طريقة" ،
    "dev": "webpack-dev-server"
   }،
  "مؤلف": ""،
  "الترخيص": "مركز الدراسات الدولي" ،
  "devDependencies": {
    "babel-cli": "^ 6.26.0" ،
    "بابل كور": "^ 6.26.0" ،
    "بابل لودر": "^ 7.1.4" ،
    "babel-preset-env": "^ 1.6.1" ،
    "babel-preset-react": "^ 6.24.1" ،
    "وقت تشغيل بابل": "^ 6.26.0" ،
    "clean-webpack-plugin": "^ 0.1.19" ،
    "eslint": "^ 4.19.1" ،
    "eslint-config-prettier": "^ 2.9.0" ،
    "eslint-loader": "^ 2.0.0"،
    "eslint-plugin-prettier": "^ 2.6.0" ،
    "eslint-plugin-react": "^ 7.7.0" ،
    "html-webpack-plugin": "^ 3.2.0" ،
    "أجمل": "^ 1.12.1" ،
    "رد فعل": "^ 16.3.2" ،
    "react-dom": "^ 16.3.2" ،
    "webpack": "^ 4.6.0" ،
    "webpack-cli": "^ 2.0.13" ،
    "webpack-dev-server": "^ 3.1.3" ،
    "webpack-md5-hash": "0.0.6"
  }
}

.babelrc

{
  "الإعدادات المسبقة": ["env" ، "react"]
}

.eslintrc.js

module.exports = {
  env: {
    المتصفح: صحيح ،
    Commonjs: صحيح ،
    es6: صحيح
  }،
  يمتد: [
    "eslint: أوصى،
    'البرنامج المساعد: الرد / أوصى،
    "أجمل"،
    'البرنامج المساعد: أجمل / أوصى "
  ]،
  parserOptions: {
    ميزات ecmaFeatures:
      experimentalObjectRestSpread: صحيح ،
      jsx: صحيح
    }،
    sourceType: 'module'
  }،
  الإضافات: ['رد فعل' ، 'أجمل'] ،
  قواعد: {
    مسافة بادئة: ['error'، 2] ،
    "نمط الخط الفاصل": ['error'، 'unix']،
    يقتبس: ['تحذير' ، 'مفرد'] ،
    شبه: ['خطأ' ، 'دائمًا'] ،
    "غير مستخدم - فارس": [
      'تحذير'،
      {vars: 'all' ، args: 'none' ، ignoreRestSiblings: false}
    ]،
    "أجمل / أجمل": "خطأ"
   }
}؛

prettier.config.js

// .prettierrc.js
module.exports = {
  عرض الطباعة: 80 ،
  علامة التبويب: 2 ،
  شبه: صحيح ،
  كلمة واحدة: صحيح ،
  قوس تباعد: صحيح
}؛

وفي src / المجلد:

index.html و


  
 
    
      

index.js

استيراد رد من "رد فعل" ؛
استيراد {تقديم} من 'react-dom' ؛
استيراد مرحبا من ". / مرحبا" ؛
الطبقة التطبيق يمتد React.Component {
  يجعل() {
    إرجاع (
      
        <مرحباً مرحباً {{مرحباً يا عالم! وشعوب العالم! '} />           )؛   } } تقديم (، document.getElementById ('app'))؛

Hello.js

استيراد رد من "رد فعل" ؛
استيراد PropTypes من "أنواع prop" ؛
الطبقة مرحبا يمتد React.Component {
  يجعل() {
    return 
{this.props.hello}
؛   } }
Hello.propTypes = {
  مرحبا: PropTypes.string
}؛
تصدير الافتراضي

كان هذا الهيكل العام للمشروع:

اذا ماذا كانت المشكلة؟

كما ترون ، قمت بإعداد البيئة ، و ESLinting ، وهلم جرا. لقد أنشأت كل شيء حتى أتمكن من بدء الترميز وإضافة مكوناتي الجديدة إلى مكتبة المكونات الجديدة اللامعة.

ولكن ماذا لو حصلت على خطأ؟ دعنا نذهب المسمار شيء.

إذا حاولنا استعادة أصل الخطأ من وحدة تحكم مستعرض Google Chrome ، فسيكون ذلك صعبًا للغاية بالنسبة لنا. سوف نتعثر على شيء مثل هذا:

لم يتم تكوين خرائط المصدر!

أريد أن أشير إلى ملف Hello.js وليس إلى ملف واحد ، مثل هذا الرجل فعله هنا.

ربما هذا شيء صغير جداً

او كذلك ظننت انا. لذا حاولت إعداد خرائط المصدر كما هو موضح في المستندات عن طريق إضافة devtool.

عندما تقوم حزمة الويب بتعبئة الكود المصدري الخاص بك ، فقد يكون من الصعب تتبع الأخطاء والتحذيرات إلى موقعها الأصلي. على سبيل المثال ، إذا قمت بتجميع ثلاثة ملفات مصدر (a.js و b.js و c.js) في حزمة واحدة (bundle.js) وكان أحد الملفات المصدر يحتوي على خطأ ، فسوف يشير تتبع المكدس ببساطة إلى الحزمة. شبيبة. هذا ليس مفيدًا دائمًا لأنك ربما تريد معرفة الملف المصدر بالضبط الذي جاء منه الخطأ.
لتسهيل تتبع الأخطاء والتحذيرات ، يقدم JavaScript خرائط المصدر ، التي تعيد رمزك المترجم إلى شفرة المصدر الأصلية. إذا كان هناك خطأ ناتج عن b.js ، فستخبرك خريطة المصدر بذلك بالضبط. (مصدر)

لذا افترضت بسذاجة أن هذا سيعمل في webpack.config.js:

...
module.exports = {
  الإدخال: {main: './src/index.js'} ،
  انتاج: {
    path: path.resolve (__ dirname، 'dist')،
    اسم الملف: '[الاسم]. [chunkhash] .js'
  }،
  devtool: 'inline-source-map' ،
  devServer: {
    contentBase: './dist' ،
    حار: صحيح ،
    فتح: صحيح
  }،
  ...

و package.json

...
"نصوص": {
  "build": "webpack - إنتاج طريقة" ،
  "dev": "webpack-dev-server - تطوير الوضع"
}
...

يجب عليك إضافة علامة تطوير عند القيام بذلك ، وإلا فلن تعمل كما يقول المستندات. ومع ذلك ، حتى مع القيمة المقترحة ، فإن خريطة المصدر لم تعمل كما أردت.

إذا قرأت هذا الدليل من SurviveJS ، وهو ما يجب عليك رؤيته.

بعد أن جربت كل خيار منها ، لجأت إلى قضية الصيد في جيثب.

جيثب قضية الصيد

محاولة كل الاقتراحات في قضايا GitHub لم يساعدني.

في مرحلة ما اعتقدت أن هناك خطأ ما في خادم webpack-dev. واتضح أن webpack-dev-server كان في وضع الصيانة لبضعة أشهر بالفعل.

لقد اكتشفت أنه بعد تعثري في هذه المشكلة ، حيث يوصون باستخدام webpack-serve بدلاً من خادم webpack-dev

بصراحة ، كانت هذه هي المرة الأولى التي أسمع فيها عن بديل يسمى webpack-serve. المستندات لا تبدو واعدة أيضًا. لكنني ما زلت قررت إعطائها فرصة.

npm تثبيت webpack-serve - حفظ ديف

أنا خلقت serve.config.js

const serve = require ('webpack-serve') ؛
const config = require ('./ webpack.config.js') ؛
يقدم ({config}) ؛

لقد استبدلت webpack-dev-server بخدمة webpack التي تخدم في ملف package.json الخاص بي.

ولكن تجربة webpack-serve لم تحلها أيضًا.

لذلك ، شعرت في هذه المرحلة أنني استخدمت كل اقتراح يمكن أن أجده على جيثب:

  • Webpack 4 - Sourcemaps: تشير هذه المشكلة إلى أن devtool: يجب أن تعمل "source-map" خارج الصندوق ، ولكن لم يكن هذا هو الحال بالنسبة لي
  • كيفية جعل خريطة مصدر webpack إلى الملفات الأصلية: إضافة devtoolModuleFilenameTemplate: info => 'file: //' + path.resolve (info.absoluteResourcePath). لم يساعد استبدال (/ \\ / g ، '/') في تكوين الإخراج الخاص بي كثير. ولكن بدلاً من client.js ، أظهر لي index.js.
  • https://github.com/webpack/webpack/issues/6400: هذا الوصف ليس وصفًا دقيقًا لمشكلتي ، لذلك يبدو أن تجربة الأساليب هنا لم تساعدني
  • لقد حاولت استخدام webpack.SourceMapDevToolPlugin ولكنه لم يعمل مع الإعداد الخاص بي ، حتى عندما قمت بحذف devtools أو ضبطها على false
  • لم أستخدم المكون الإضافي UglifyJS هنا ، لذلك لم يكن إعداد الخيارات له حلاً
  • أعلم أن webpack-dev-server قيد الصيانة الآن ، لذا جربت webpack-serve ، لكن يبدو أن خرائط المصدر لا تعمل معها أيضًا
  • جربت حزمة دعم خريطة المصدر أيضًا ، لكن لم يحالفني الحظ هناك. لدي موقف مماثل كما رأينا هنا.

The StackOverflow المقدسة

استغرق الأمر إلى الأبد لتكوين خرائط المصدر ، لذلك قمت بإنشاء مشكلة على StackOverflow.

عادةً ما تكون تصحيح أخطاء webpack مهمة مرهقة: أفضل طريقة للقيام بها هي إنشاء تهيئة من نقطة الصفر. إذا لم يعمل شيء ما من الوثائق كما هو متوقع ، فقد يكون من الجيد محاولة البحث عن مشكلة مماثلة في أحد الفروع أو إنشاء مشكلتك الخاصة. اعتقدت ذلك ، على أي حال.

كان أول شخص أجاب عن مشكلتي يحاول حقًا المساعدة. وقال انه يشارك التكوين العمل الخاصة به. ساعدني حتى عن طريق إنشاء طلب سحب.

المشكلة الوحيدة هنا: لماذا يعمل إعداده؟ أعني ، ربما هذا ليس سحريًا ، وهناك بعض التعارض في الوحدة. للأسف ، لم أستطع فهم سبب عدم عمل الإعداد الخاص بي:

الشيء هو أنه فعل ذلك مع أفضل النوايا من خلال إعادة هيكلة المشروع طريقه.

هذا يعني أنه سيكون لدي بعض الإعداد في المشروع وسيتعين علي تغيير بعض الأشياء. ربما كان هذا جيدًا إذا كنت أقوم بإجراء إعداد اختبار ، لكنني قررت إجراء التغييرات التدريجية على الملفات لمعرفة أين كان يتكسر.

تشريح القضية

لذلك دعونا نلقي نظرة على الاختلافات بين Webpack و package.json و لي. فقط للسجل ، استخدمت repo مختلفة في السؤال ، لذلك هنا هو الرابط الخاص بي repo والإعداد الخاص بي.

// webpack v4.6.0
const مسار = تتطلب ('مسار') ؛
const HtmlWebpackPlugin = require ('html-webpack-plugin')؛
const WebpackMd5Hash = require ('webpack-md5-hash') ؛
const CleanWebpackPlugin = require ('clean-webpack-plugin')؛
const stylish = require ('eslint / lib / formatters / stylish') ؛
const webpack = تتطلب ('webpack') ؛
module.exports = {
  الإدخال: {main: './src/index.js'} ،
  انتاج: {
   devtoolModuleFilenameTemplate: info => 'file: //' + path.resolve (info.absoluteResourcePath) .replace (/ \\ / g، '/')،
   path: path.resolve (__ dirname، 'dist')،
   اسم الملف: '[الاسم]. [التجزئة] .js'
  }،
  الوضع: "التنمية" ،
  devtool: 'eval-cheap-module-source-map' ،
  devServer: {
    contentBase: './dist' ،
    حار: صحيح
  }،
  وحدة: {
    قواعد: [
      {
        اختبار: / \. js$/ ،
        استبعاد: / node_modules / ،
        لودر: 'بابل لودر'
      }،
      {
        اختبار: / \. js$/ ،
        استبعاد: / node_modules / ،
        اللودر: 'eslint-loader' ،
        خيارات: {
          المنسق: أنيق
         }
       }
     ]
   }،
   الإضافات: [
    // new webpack.SourceMapDevToolPlugin ({
    // filename: '[file] .map' ،
    // moduleFilenameTemplate: undefined،
    // fallbackModuleFilenameTemplate: undefined،
    // إلحاق: لاغ
    // الوحدة: صحيح ،
    // الأعمدة: صحيح ،
    // lineToLine: false ،
    // noSources: false،
    // مساحة الاسم: ''
    //}) ،
    CleanWebpackPlugin ('dist'، {})،
    جديد HtmlWebpackPlugin ({
      حقن: خطأ ،
      التجزئة: صحيح ،
      القالب: './src/index.html' ،
      اسم الملف: 'index.html'
    })،
    WebpackMd5Hash () جديد ،
    // new webpack.NamedModulesPlugin () ،
    حزمة الويب الجديدة. HotModuleReplacementPlugin ()
  ]

package.json

{
"name": "post" ،
"الإصدار": "1.0.0" ،
"وصف": ""،
"الرئيسي": "index.js" ،
"نصوص": {
  "storybook": "start-storybook -p 9001 -c .storybook"،
  "dev": "webpack-dev-server - تطوير الوضع - مفتوح" ،
  "build": "webpack - إنتاج الوضع"
}،
"مؤلف": ""،
"الترخيص": "مركز الدراسات الدولي" ،
"devDependencies": {
  "@ storybook / addon-Actions": "^ 3.4.3" ،
  "@ storybook / react": "v4.0.0-alpha.4" ،
  "babel-cli": "^ 6.26.0" ،
  "بابل كور": "^ 6.26.0" ،
  "بابل لودر": "^ 7.1.4" ،
  "babel-preset-env": "^ 1.6.1" ،
  "babel-preset-react": "^ 6.24.1" ،
  "وقت تشغيل بابل": "^ 6.26.0" ،
  "clean-webpack-plugin": "^ 0.1.19" ،
  "eslint": "^ 4.19.1" ،
  "eslint-config-prettier": "^ 2.9.0" ،
  "eslint-loader": "^ 2.0.0"،
  "eslint-plugin-prettier": "^ 2.6.0" ،
  "eslint-plugin-react": "^ 7.7.0" ،
  "html-webpack-plugin": "^ 3.2.0" ،
  "أجمل": "^ 1.12.1" ،
  "رد فعل": "^ 16.3.2" ،
  "react-dom": "^ 16.3.2" ،
  "webpack": "v4.6.0" ،
  "webpack-cli": "^ 2.0.13" ،
  "webpack-dev-server": "v3.1.3" ،
  "webpack-md5-hash": "0.0.6" ،
  "webpack-serve": "^ 0.3.1"
}،
"التبعيات": {
  "source-map-support": "^ 0.5.5"
}
}

تركتها سليمة عن قصد حتى تتمكن من رؤية محاولات تصحيح الأخطاء الخاصة بي. كل شيء يعمل باستثناء خرائط المصدر. أدناه ، سوف أشارك ما قام بتغييره في التكوين الخاص بي - ولكن من الأفضل بالطبع التحقق من طلب السحب الكامل هنا.

 // webpack v4.6.0
 const مسار = تتطلب ('مسار') ؛
 const HtmlWebpackPlugin = require ('html-webpack-plugin')؛
 // حذف هذه الوحدة من التكوين
-const WebpackMd5Hash = require ('webpack-md5-hash') ؛
 const CleanWebpackPlugin = require ('clean-webpack-plugin')؛
 const stylish = require ('eslint / lib / formatters / stylish') ؛
 const webpack = تتطلب ('webpack') ؛
 
 module.exports = {
  // إضافة إعداد الوضع هنا بدلاً من العلم
وضع +: "التنمية" ،
   الإدخال: {main: './src/index.js'} ،
   انتاج: {
  // حذف المسار والقالب من الإخراج
- devtoolModuleFilenameTemplate: info =>
- 'ملف: //' + path.resolve (info.absoluteResourcePath). استبدال (/ \\ / g ، '/') ،
- path: path.resolve (__ dirname، 'dist')،
     اسم الملف: '[الاسم]. [التجزئة] .js'
   }،
  // إضافة خيار الحل هنا
+ حل:
+ الإضافات: ['.js' ، '.jsx']
+} ،
   // تغيير خيار devtool
   devtool: 'eval-cheap-module-source-map' ،
  // تغيير إعدادات devServer
   devServer: {
- contentBase: './dist' ،
- حار: صحيح
+ الساخنة: صحيح ،
+ فتح: صحيح
   }،
   وحدة: {
     قواعد: [
    / / وضع اثنين من الشيكات في واحد (في وقت لاحق سألني في الدردشة لحذف خيار eslint تماما)
       {
- الاختبار: / \. js$/ ،
- استبعاد: / node_modules / ،
- لودر: "بابل لودر"
-} ،
- {
- الاختبار: / \. js$/ ،
+ اختبار: /\.jsx؟$/ ،
         استبعاد: / node_modules / ،
- اللودر: 'eslint-loader' ،
-        خيارات: {
- المنسق: أنيق
-}
+ الاستخدام: [
+ {loader: 'babel-loader'}،
+ {loader: 'eslint-loader' ، الخيارات: {formatter: stylish}}
+]
       }
     ]
   }،
   الإضافات: [
    // تنظيف بعض الخيارات
- CleanWebpackPlugin ('dist'، {})،
+ CleanWebpackPlugin جديد ('dist') ،
    // حذف بعض الإعدادات من HTMLWebpackPlugin
     جديد HtmlWebpackPlugin ({
- حقن: خطأ ،
- التجزئة: صحيح ،
- القالب: './src/index.html' ،
- اسم الملف: 'index.html'
+ القالب: './src/index.html'
     })،
  / / أزال تماما البرنامج المساعد التجزئة وإضافة واحدة استبدال وحدة ساخنة
- WebpackMd5Hash () جديد ،
- webpack.NamedModulesPlugin () جديد ،
+ حزمة ويب جديدة. HotModuleReplacementPlugin ()
   ]
 }؛

package.json

"الرئيسي": "index.js" ،
   "نصوص": {
     "storybook": "start-storybook -p 9001 -c .storybook"،
  // أضافت أعلامًا مختلفة لخادم webpack-dev
- "dev": "webpack-dev-server - تطوير الوضع - مفتوح" ،
+ "dev": "webpack-dev-server --config ./webpack.config.js" ،
     "build": "webpack - إنتاج الوضع"
   }،
   "مؤلف": ""،
-31،11 +31،6
     "react-dom": "^ 16.3.2" ،
     "webpack": "v4.6.0" ،
     "webpack-cli": "^ 2.0.13" ،
- "webpack-dev-server": "v3.1.3" ،
- "webpack-md5-hash": "0.0.6" ،
- "webpack-serve": "^ 0.3.1"
-} ،
- "التبعيات": {
// نقل خادم ديف إلى التبعيات
- "source-map-support": "^ 0.5.5"
+ "webpack-dev-server": "v3.1.3"
   }
 }

كما ترون ، قام بحذف مجموعة من الوحدات المضافة ووضع داخل التكوين. وإلقاء نظرة على طلب السحب ، يمكنك أن ترى أنه أضاف أيضًا بعض HMR الموجَّه نحو رد الفعل.

ساعد هذا خرائط المصدر على العمل من خلال التضحية بالكثير من الإضافات ، ولكن لم يكن هناك تفسير محدد لماذا فعل ما فعله. كشخص يقرأ المستندات ، لم يكن ذلك مرضي للغاية بالنسبة لي.

في وقت لاحق ، أخذت webpack.connfig.js المبدئي وبدأت في إضافة التغييرات خطوة بخطوة لمعرفة متى بدأت الخرائط المصدر تعمل أخيرًا.

التغيير 1:

- CleanWebpackPlugin ('dist'، {})،
+ CleanWebpackPlugin جديد ('dist') ،

التغيير 2:

أضفت webpack-dev-server إلى التبعيات ، وليس إلى تبعيات:

...
"التبعيات": {
  "webpack-dev-server": "^ 3.1.3"
}
}
...

التغيير 3:

بعد ذلك ، قمت بإزالة بعض إعدادات devServer:

devServer: {
- contentBase: './dist' ،
+ الساخنة: صحيح ،
+ فتح: صحيح
   }،

التغيير 4:

دعنا نزيل أنيقة:

...
devtool: 'inline-source-map' ،
  devServer: {
    حار: صحيح ،
    فتح: صحيح
  }،
...
استعمال: [
  {loader: 'babel-loader'}،
  {
    اللودر: 'eslint-loader'
  }
]
....

التغيير 5:

دعنا نحاول إزالة المكون الإضافي للتجزئة WebpackMd5Hash الآن:

...
module.exports = {
الوضع: "التنمية" ،
الإدخال: {main: './src/index.js'} ،
انتاج: {
  path: path.resolve (__ dirname، 'dist')،
  اسم الملف: '[الاسم] .js'
  }،
devtool: 'inline-source-map' ،
...
الإضافات: [
  CleanWebpackPlugin ('dist') ،
  جديد HtmlWebpackPlugin ({
    حقن: خطأ ،
    التجزئة: صحيح ،
    القالب: './src/index.html' ،
    اسم الملف: 'index.html'
  })
- WebpackMd5Hash () جديد ،
 ]

التغيير 6:

الآن دعونا نحاول إزالة بعض الإعدادات من HtmlWebpackPlugin:

...
الإضافات: [
  CleanWebpackPlugin ('dist') ،
  جديد HtmlWebpackPlugin ({
    القالب: './src/index.html'
  })
]}؛
...

التغيير 7:

كما نرى في شفرته ، أضاف بعض خيارات العزم هنا. أنا شخصياً لا أفهم لماذا نحتاجهم هنا. ولم أتمكن من العثور على المعلومات في المستندات ، أيضًا.

...
حل: {
  الامتدادات: ['.js' ، '.jsx']
}،
وحدة: {
...

التغيير 8:

حذف مسار الإخراج:

...
الإدخال: {main: './src/index.js'} ،
انتاج: {
  اسم الملف: '[الاسم] .js'
}،
devtool: 'inline-source-map' ،
...

التغيير 9:

إضافة المكون الإضافي لاستبدال الوحدة النمطية الساخنة:

...
const HtmlWebpackPlugin = require ('html-webpack-plugin')؛
const CleanWebpackPlugin = require ('clean-webpack-plugin')؛
const webpack = تتطلب ('webpack') ؛
...
الإضافات: [
  CleanWebpackPlugin ('dist') ،
  جديد HtmlWebpackPlugin ({
    القالب: './src/index.html'
  })،
  حزمة الويب الجديدة. HotModuleReplacementPlugin ()
]
}؛
...

التغيير 10:

إضافة - التكوين إلى package.json:

- "dev": "webpack-dev-server - تطوير الوضع - مفتوح" ،
+ "dev": "webpack-dev-server --config ./webpack.config.js" ،

دعونا نجعل شيئًا ما واضحًا: في هذه المرحلة كنت قد أعدت كتابة التهيئة.

هذه مشكلة كبيرة ، حيث لا يمكننا إعادة كتابتها في كل مرة لا يعمل فيها شيء ما!

قم بإنشاء تطبيق تفاعلي في أفضل مصدر للتعرف على حزمة الويب

كملاذ أخير ، ذهبت للتحقق من كيفية تطبيق create-react-app على تعيين المصدر. كان هذا هو القرار الصحيح بعد كل شيء. هذا هو التكوين من webpack ديف الإصدار.

إذا تحققنا من كيفية تطبيق devtool هناك ، فسنرى:

// قد ترغب في "eval" بدلاً من ذلك إذا كنت تفضل مشاهدة الإخراج المترجم في DevTools.
// انظر المناقشة في https://github.com/facebook/create-react-app/issues/343.
devtool: 'cheap-module-source-map'

إذن هذه المسألة أشارت إلى قضية أخرى ، وجدت هنا

// webpack v4
const مسار = تتطلب ('مسار') ؛
const HtmlWebpackPlugin = require ('html-webpack-plugin')؛
const WebpackMd5Hash = require ('webpack-md5-hash') ؛
const CleanWebpackPlugin = require ('clean-webpack-plugin')؛
module.exports = {
الوضع: "التنمية" ،
الإدخال: {main: './src/index.js'} ،
انتاج: {
  path: path.resolve (__ dirname، 'dist')،
  اسم الملف: '[الاسم]. [التجزئة] .js'
}،
devtool: 'cheap-module-source-map' ،
devServer: {
  contentBase: './dist' ،
  حار: صحيح ،
  فتح: صحيح
}،
وحدة: {

تغيير الخطوط لا يزال لا يعمل - حتى الآن! لقد تعلمت أن خريطة المصدر هي قضية معلقة منذ فترة طويلة.

اسأل من الأشخاص المناسبين

كل مشروع مفتوح المصدر لديه مشرفون. لذلك ، في هذه الحالة ، كانت بالتأكيد الخطوة الصحيحة لسؤال اللاعبين على الفور.

على الرغم من أن طريقة التجربة والخطأ من دانيال لم تنجح حقًا بالنسبة لي ، فقد فوجئت بسرور بمدى قوة فريق الصيانة.

لذلك أنا خلقت الريبو مع الإعداد يمكنك أن ترى هنا. تحقق من الالتزام الثاني هناك.

لتسهيل الأمر عليك ، إليك هنا webpack.js مشروعي حيث عدت إلى إعداد نظري الأولي:

// webpack v4
const مسار = تتطلب ('مسار') ؛
const HtmlWebpackPlugin = require ('html-webpack-plugin')؛
const WebpackMd5Hash = require ('webpack-md5-hash') ؛
const CleanWebpackPlugin = require ('clean-webpack-plugin')؛
module.exports = {
  الوضع: "التنمية" ،
  الإدخال: {main: './src/index.js'} ،
  انتاج: {
    path: path.resolve (__ dirname، 'dist')،
    اسم الملف: '[الاسم]. [التجزئة] .js'
  }،
  devtool: 'inline-source-map' ،
  devServer: {
    contentBase: './dist' ،
    حار: صحيح ،
    فتح: صحيح
  }،
  وحدة: {
    قواعد: [
      {
        اختبار: / \. js$/ ،
        استبعاد: / node_modules / ،
        استعمال: [
          {loader: 'babel-loader'}،
          {
            اللودر: 'eslint-loader' ،
            خيارات: {
              المنسق: يتطلب ('eslint / lib / formatters / stylish')
            }
          }
         ]
        }
      ]
  }،
  الإضافات: [
    CleanWebpackPlugin ('dist') ،
    جديد HtmlWebpackPlugin ({
      حقن: خطأ ،
      التجزئة: صحيح ،
      القالب: './src/index.html' ،
      اسم الملف: 'index.html'
    })،
    WebpackMd5Hash () جديدة
  ]
}؛

بعد التحقق من الكود ، أنشأ المشرف مشكلة.

لنلخص ما شمله هناك:

ضبط خيار الوضع
المشكلة الأولى التي وجدتها هي كيفية تعيين خيار الوضع. في البرامج النصية npm تم تعيين الوضع على النحو التالي:
webpack - طريقة الإنتاج
الطريقة الصحيحة ستكون:
webpack - طريقة = الإنتاج
تبدو الحالة النهائية لنصوص npm هكذا بالنسبة لي:
"نصوص": {
 "build": "webpack --mode = production" ،
 "start": "webpack-dev-server --mode = development --hot"
}
لقد غيرت أيضًا dev dev لبدء التشغيل لأنها أكثر معيارًا ومن المتوقع من المطورين الآخرين كأمر. يمكنك فعلًا بدء تشغيل npm ، دون تشغيل الأمر
...
"نصوص": {
  "build": "webpack - إنتاج طريقة" ،
  "dev": "webpack-dev-server --mode = development --hot"
}،
...

بعد ذلك اقترح ما يلي:

devtool للخرائط المصدر
أوصي دائمًا بخيار الخريطة المضمّنة للمصدر ، وهو الخيار الأكثر مباشرة للأمام ويتم تضمينه في الحزمة نفسها كتعليق في نهاية الأمر.
module.exports = {
+ devtool: 'inline-source-map' ،
 // بقية التكوين الخاص بك
}
أوصي أيضًا بإنشاء كائن منفصل ونشر هذا فقط على التطوير:
أمر
webpack-dev-server - طريقة = تطوير NODE_ENV = تطوير
webpack.config.js
const webpackConfig = {}
if (process.env.NODE_ENV === 'development') {
 webpackConfig.devtool = 'خريطة مضمّنة للمصدر'
}
وبهذه الطريقة تتأكد من عدم تأثر الحزمة المتعلقة بالإنتاج بهذا.

ثم اقترح إزالة ESLint من اللوادر:

تجربة Linting والمطور
بصراحة ، أود أن أحذف eslint كجهاز تحميل ، إنه برنامج غير مرغوب فيه فائق ويخفق في التدفق. أنا أفضل أن أضيف githook precommit للتحقق من هذا.
هذا سهل للغاية بإضافة نص مثل هذا:
"نصوص": {
+ "lint": "eslint ./src/**/*.js"
 "build": "webpack --mode = production" ،
 "start": "webpack-dev-server --mode = development --hot"
}
ثم دمجها مع أجش.

وإضافته إلى البرامج النصية:

...
"نصوص": {
"lint": "eslint ./src/**/*.js" ،
"build": "webpack - إنتاج طريقة" ،
"dev": "webpack-dev-server --mode = development --hot"
...

لقد ارتكبت خطأ في src / Hello.js عن قصد لمعرفة كيفية عمل خرائط المصدر هذه المرة.

استيراد رد من "رد فعل" ؛
استيراد PropTypes من "أنواع prop" ؛
الطبقة مرحبا يمتد React.Component {
  console.log (hello.world)؛
  يجعل() {
    return 
{this.props.hello}
؛   } } Hello.propTypes = {   مرحبا: PropTypes.string }؛ تصدير الافتراضي

كيف أصلحت المشكلة

كانت القضية EsLint. ولكن بعد تحديد الأوضاع بشكل صحيح وإزالة محمل eslint ، عملت خرائط المصدر بشكل جيد!

باتباع المثال الذي قدمه لي المشرف ، قمت بتحديث Webpack على:

// webpack v4
const مسار = تتطلب ('مسار') ؛
const HtmlWebpackPlugin = require ('html-webpack-plugin')؛
const WebpackMd5Hash = require ('webpack-md5-hash') ؛
const CleanWebpackPlugin = require ('clean-webpack-plugin')؛
module.exports = {
  الإدخال: {main: './src/index.js'} ،
  انتاج: {
    path: path.resolve (__ dirname، 'dist')،
    اسم الملف: '[الاسم]. [التجزئة] .js'
  }،
  devtool: 'inline-source-map' ،
  devServer: {
    contentBase: './dist' ،
    حار: صحيح ،
    فتح: صحيح
  }،
  وحدة: {
    قواعد: [
     {
      اختبار: / \. js$/ ،
      استبعاد: / node_modules / ،
      الاستخدام: [{loader: 'babel-loader'}]
     }
    ]
  }،
  الإضافات: [
    CleanWebpackPlugin ('dist') ،
    جديد HtmlWebpackPlugin ({
      حقن: خطأ ،
      التجزئة: صحيح ،
      القالب: './src/index.html' ،
      اسم الملف: 'index.html'
    })،
    WebpackMd5Hash () جديدة
  ]
}؛

وحزمي JSON إلى:

{
"name": "post" ،
"الإصدار": "1.0.0" ،
"وصف": ""،
"الرئيسي": "index.js" ،
"نصوص": {
  "build": "webpack --mode = production" ،
  "start": "NODE_ENV = development webpack-dev-server --mode = development --hot"
}،
"مؤلف": ""،
"الترخيص": "مركز الدراسات الدولي" ،
"devDependencies": {
  "babel-cli": "^ 6.26.0" ،
  "بابل كور": "^ 6.26.0" ،
  "بابل لودر": "^ 7.1.4" ،
  "babel-preset-env": "^ 1.6.1" ،
  "babel-preset-react": "^ 6.24.1" ،
  "وقت تشغيل بابل": "^ 6.26.0" ،
  "clean-webpack-plugin": "^ 0.1.19" ،
  "eslint": "^ 4.19.1" ،
  "eslint-config-prettier": "^ 2.9.0" ،
  "eslint-loader": "^ 2.0.0"،
  "eslint-plugin-prettier": "^ 2.6.0" ،
  "eslint-plugin-react": "^ 7.7.0" ،
  "html-webpack-plugin": "^ 3.2.0" ،
  "أجمل": "^ 1.12.1" ،
  "رد فعل": "^ 16.3.2" ،
  "react-dom": "^ 16.3.2" ،
  "webpack": "^ 4.6.0" ،
  "webpack-cli": "^ 2.0.13" ،
  "webpack-md5-hash": "0.0.6"
}،
"التبعيات": {
  "webpack-dev-server": "^ 3.1.3"
}
}

وأخيرا عملت خرائط المصدر!

الاستنتاجات:

كانت خرائط المصدر موضوع مناقشات متعددة وأخطاء منذ عام 2016 ، كما ترون هنا.

Webapack يحتاج مساعدة في التدقيق!

بعد العثور على هذا الخطأ ، قدمت مشكلة إلى حزمة لودر ESLint.

عندما يتعلق الأمر بالتحقق من جودة خرائط المصدر ، يمكننا استخدام هذه الأداة.

ماذا يمكنك أن تفعل إذا كان لديك مشكلة في حزمة الويب؟

في حال تعثرت في مشكلة مع Webpack ، فلا داعي للقلق! اتبع هذه الخطوات:

  • ابحث في مشكلات GitHub المشابهة لك.
  • حاول التحقق من المراجل ونرى كيف يتم تطبيق الميزة هناك ، مثل إنشاء تطبيق رد فعل على سبيل المثال.
  • طرح الأسئلة على StackOverflow - لا تخافوا! تأكد من نفاد طرق حل مشكلتك بمفردك.
  • لا تتردد في تغريدة عن ذلك واسأل المشرفين مباشرة.
  • خلق القضايا بمجرد العثور عليها. هذا سيساعد المساهمين كثيرا!

في هذه المقالة ، قمت بتزويدك بملف التكوين الخاص بي والعملية التي استخدمتها لتكوينه خطوة بخطوة.

ملاحظة: نظرًا لأن الكثير من تبعيات npm قد تتغير بحلول الوقت الذي تقرأ فيه هذا ، فقد لا يعمل نفس التكوين بالنسبة لك! أرجو منك ترك أخطائك في التعليقات أدناه حتى أتمكن من تعديلها لاحقًا.

من فضلك ، اشترك والتصفيق لهذا المقال! شكر!