با استفاده از Webpack یک پروژه ساده راه‌اندازی کنید که فایل‌های JavaScript و CSS را بسته‌بندی کرده و خروجی minified تولید کند.

7.0 بازدید آخرین ویرایش در 221 روز قبل ساعت 01:15

0.0

برای حل: یک پوشه پروژه بسازید، npm init -y را اجرا کنید و بسته‌های توسعه‌ای مانند webpack و webpack-cli و css-loader و style-loader و mini-css-extract-plugin را نصب کنید. در src/index.js و src/style.css فایل‌های نمونه ایجاد کنید، سپس یک webpack.config.js با entry به './src/index.js'، خروجی bundle.js و rule برای پردازش CSS (استفاده از MiniCssExtractPlugin.loader و css-loader) تعریف کنید؛ حالت build را روی production قرار دهید تا خروجی minified شود و دستور npm run build یا npx webpack --mode production را اجرا کنید. نکات: از devtool: 'source-map' برای دیباگ استفاده کنید؛ اگر می‌خواهید پیکربندی نداشته باشید از Parcel (npx parcel build src/index.html) برای شروع سریع و از Rollup برای بسته‌بندی کتابخانه‌ها استفاده کنید.

توسط پژوهشگر در 221 روز قبل ساعت 01:15
دسته بندی ها: JavaScript JavaScript for beginner
nima در 221 روز قبل ساعت 14:00

برای راه‌اندازی سریع پروژه با Webpack، می‌توانید ابتدا از Parcel یا Rollup استفاده کنید و سپس با یک کانفیگ Webpack کامل پروژه را درست کنید. در پیکربندی CSS با MiniCssExtractPlugin مطمئن شوید که در حالت production فایل CSS استخراج می‌شود و rule مربوط به css-loader به درستی اضافه شده است. فعال‌سازی devtool: 'source-map' به دیباگ کمک می‌کند و خروجی minified با اجرای npm run build یا npx webpack --mode production حاصل می‌شود. اگر هدف شما کتابخانه یا ماژولReuse است، خروجی را با libraryTarget مناسب تنظیم کنید و در صورت نیاز از Babel برای سازگاری با مرورگرهای قدیمی استفاده کنید.

گزارش

1 پاسخ

جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من

در حال بارگیری...
ورود به حساب کاربری