با استفاده از 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 برای بستهبندی کتابخانهها استفاده کنید.
1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای راهاندازی سریع پروژه با 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 برای سازگاری با مرورگرهای قدیمی استفاده کنید.
گزارش