وبلاگ با برنامه
» کدنویسی تنظیمات webpack برای راه اندازی Reactjs
کدنویسی تنظیمات webpack برای راه اندازی Reactjs
همیشه برای راه اندازی React از create-react-app استفاده میکردید؟ حالا با خوانش این مقاله ببینید چه راحت میتوانید با webpack این کار را انجام دهید. نیازی به داشتن اطلاعات پیشفرض نیست بلکه به دلیل آپدیت های webpack.js.org بهتر است کدها را کپی پیست کنیم.
پیش نمایش از کد های نهایی
کدهای نهایی را از اینجا دانلود کنید. آن را از حالت زیپ خارج کنید. این مقاله را کامل بخوانید و عملیات زیر را روی آن انجام دهید تا در نهایت در بروزر چنین تصویری مشاهده کنید.
نصب پکیج های مورد نیاز
از اتصال سیستم خود به اینترنت مطمین شوید.ترمینال را باز کنید. منظور windows powershell است. ترمینال را با خط اول از کد زیر به مسیر پروژه هدایت کنید. با وارد کردن عبارت خط دوم چند دقیقه صبر
مطلب مرتبط
آموزش Communication در هوانوردیکنید. در حال دانلود پکیج های مورد نیاز است.
cd Desktop/react-test-master npm i
آماده شدن برای استفاده از webpack در ترمینال
یکی از دو خط کد زیر کافیست تا وبپک بصورت گلوبال نصب شود.
yarn global add webpack-cli npm i -g webpack-cli
نکته: توصیه میشود از yarn بجای npm استفاده کنید کافیست به سایت yarnpkg.com سربزنید و نصبش کنید! نسبت به npm سرعت بیشتری در نصب پکیج ها دارد.
تجزیه و تحلیل کدهای webpack.config.js
در فایلی که دانلود کردید این قطعه کدها را مشاهده نمایید!
entry: "/Users/shervin/Desktop/react-test/app/index.jsx",
نکته ۱: اول از همه به آدرس entry دقت کنید! آن قسمت که shervin نوشته شده باید به نام pc شما تغییر کند. همینطور کل آدرس را یکبار دیگر چک کنید تا کاملا با دایرکتوری پروژه شما همخوانی داشته باشد.
path:"/Users/shervin/Desktop/react-test/server/public/react", filename: "bundle.js",
نکته ۲: با توجه به کدهای بالا آدرس path در داخل output را بررسی کنید. آن هم باید دقیق باشد. درغیراینصورت ارورها در ترمینال آن را گوشزد میکنند. همچنین filename: "bundle.js" بیان میکند که نام فایلی که با وبپک باندل میشود چه باشد. میتوانید نام دلخواه بگذارید.
کدهای loaders در سایت وبپک
به صفحه http://webpack.js.org/loaders بروید! به دلیل تعدد دفعاتی که به این صفحه سر زده میشود بهتر است ادرس ان را حفظ باشیم. در این صفحه لیست loader های وبپک آمده است. هروقت بخواهیم قابلیتی به تنظیمات وبپک اضافه کنیم سراغش میرویم و کدهایی کپی پیست میکنیم. اگر لینک یادتان رفت کافیست از گوگل استفاده کنید. عبارت webpack loaders را سرچ کنید.
قطعه کد زیر از صفحه babel-loader از سایت وبپک آمده است. وقتی در ترمینال کپی پیست کنیم, پکیج های مورد نیاز نصب میشوند.
npm install -D babel-loader @babel/core @babel/preset-env webpack
علاوه بر نصب آنها یک پکیج را نیز که هنوز نصب نشده نصب کنید! این پکیج با وجود اینکه در سایت وبپک به آن اشاره نشده برای باندل کردن ری اکت میباشد.
npm i @babel/preset-react
باندل کردن تمام کد های React در یک فایل js
در ترمینال کافیست فقط یک کلمه بنویسید
webpack
وقتی متن زردرنگ و آبی رنگ نمایش داده شوند یعنی ارور ندارد و کامپایل به درستی انجام شده است. حالا
بروزر را باز کنید و تصویری که در ابتدای این مقاله دیده بودید را در بروزر خود تماشا کنید!
از مطالعه شما سپاسگذارم!
