×ðÁú¿­Ê±¹ÙÍøµÇ¼

Laravel¿ª·¢£ºÔõÑùʹÓÃLaravel MixºÍWebpackÓÅ»¯Îļþ´óС£¿

laravel¿ª·¢£ºÔõÑùʹÓÃlaravel mixºÍwebpackÓÅ»¯Îļþ´óС£¿

LaravelÊÇÒ»¸öºÜÊÇÊ¢ÐеÄPHP¿ò¼Ü£¬ËüÌṩÁËÐí¶à¹¦Ð§ºÍ¹¤¾ß£¬×ÊÖú¿ª·¢ÕßÔÚ¹¹½¨WebÓ¦ÓóÌÐòʱÌá¸ßÉú²úЧÂÊ¡£ÆäÖУ¬Laravel MixºÍWebpackÊÇÁ½¸öÇ¿Ê¢µÄ¹¤¾ß£¬ËüÃÇ¿ÉÒÔ×ÊÖúÄúÓÅ»¯Îļþ¾ÞϸºÍÌá¸ßÐÔÄÜ¡£ÔÚ±¾ÎÄÖУ¬ÎÒÃǽ«ÏÈÈÝÔõÑùʹÓÃLaravel MixºÍWebpackÓÅ»¯Îļþ¾Þϸ¡£

ʲôÊÇLaravel Mix£¿

Laravel MixÊÇÓÉLaravelÍŶӿª·¢µÄÒ»¸ö¹¤¾ß£¬ËüΪ¿ª·¢ÕßÌṩÁËÒ»ÖÖ¼òÆӵķ½·¨À´±àÒëCSSºÍJavaScriptÎļþ¡£Ê¹ÓÃLaravel Mix£¬Äú¿ÉÒÔÇáËɵؽ«CSSºÍJavaScriptÎļþºÏ²¢£¬Ñ¹Ëõ£¬ÒÔ¼°ÓÅ»¯¼ÓÔØÐÔÄÜ¡£Laravel Mixͨ³£ÓëWebpackÒ»ÆðʹÓã¬ËüÊÇÒ»¸öÏÖ´ú»¯µÄJavaScriptÓ¦ÓóÌÐò¹¹½¨¹¤¾ß¡£

ʲôÊÇWebpack£¿

WebpackÊÇÒ»¸öÄ£¿é»¯´ò°ü¹¤¾ß£¬Ëü¿ÉÒÔ½«JavaScriptÓ¦ÓóÌÐòÖеÄËùÓдúÂëƾ֤Ä£¿éÒÀÀµ¹Øϵ´ò°ü³ÉÒ»¸ö»ò¶à¸öÎļþ¡£Webpack»¹Ö§³Ö¼ÓÔØCSS£¬Í¼Æ¬£¬×ÖÌåµÈ·ÇJavaScriptÎļþ£¬²¢ÌṩÁËÇ¿Ê¢µÄ²å¼þϵͳ£¬¿ÉÒÔ×ÊÖúÄú¼ò»¯¿ª·¢Á÷³ÌºÍÓÅ»¯Êä³ö´úÂë¡£

ʹÓÃLaravel MixºÍWebpackÓÅ»¯Îļþ¾ÞϸµÄ°ì·¨

ÏÂÃæÊÇʹÓÃLaravel MixºÍWebpackÓÅ»¯Îļþ¾ÞϸµÄ°ì·¨£º

1.×°ÖÃLaravel MixºÍWebpack

ÔÚ×îÏÈʹÓÃLaravel MixºÍWebpack֮ǰ£¬ÄúÐèҪȷ±£ÒÑ×°ÖÃNode.jsºÍnpm°ü¹ÜÀíÆ÷¡£È»ºó£¬ÄúÐèҪʹÓÃnpm×°ÖÃLaravel MixºÍWebpack£º

npm install laravel-mix webpack –save-dev

2.ÉèÖÃwebpack.mix.jsÎļþ

ÔÚÄúµÄLaravelÓ¦ÓóÌÐòµÄ¸ùĿ¼Öн¨ÉèÒ»¸öwebpack.mix.jsÎļþ¡£Õâ¸öÎļþ½«×÷ΪLaravel MixµÄÉèÖÃÎļþ£¬Äú¿ÉÒÔÔÚÕâÀï½ç˵ËùÓеÄCSSºÍJavaScriptÎļþ£¬²¢Ê¹ÓÃWebpackÀ´´ò°üºÍÓÅ»¯ËüÃÇ¡£ÒÔÏÂÊÇÒ»¸ö¼òÆÓµÄʾÀý£º

let mix = require("laravel-mix");

mix.js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css");

µÇ¼ºó¸´ÖÆ

ÔÚÉÏÃæµÄʾÀýÖУ¬ÎÒÃÇʹÓÃmix.js£¨£©ºÍmix.sass£¨£©ÒªÁìÀ´½ç˵JavaScriptºÍCSSÎļþµÄ·¾¶ºÍÊä³ö·¾¶¡£

3.Ìí¼ÓWebpack²å¼þ

ÔÚÉèÖÃÎļþÖУ¬Äú¿ÉÒÔÌí¼ÓһЩWebpack²å¼þÀ´ÓÅ»¯ÄúµÄÊä³öÎļþ¡£ÒÔÏÂÊÇһЩ³£¼ûµÄ²å¼þ£º

UglifyJsPlugin£ºÓÃÓÚѹËõºÍ»ìÏýJavaScriptÎļþ¡£

OptimizeCSSAssetsPlugin£ºÓÃÓÚѹËõºÍÓÅ»¯CSSÎļþ¡£

ImageminPlugin£ºÓÃÓÚÓÅ»¯¿ÉÒÔ±»Ñ¹ËõµÄͼƬÎļþ¡£

CopyWebpackPlugin£ºÓÃÓÚ´ÓԴĿ¼¸´ÖÆÎļþµ½Êä³öĿ¼¡£

Äú¿ÉÒÔÔÚWebpack²å¼þµÄ¹Ù·½ÎĵµÖÐÕÒµ½¸ü¶àµÄ²å¼þ¡£

4.ÔËÐÐnpm run dev»ònpm run production

µ±ÉèÖÃÎļþÍê³Éºó£¬Äú¿ÉÒÔʹÓÃnpm run dev»ònpm run productionÏÂÁîÀ´ÔËÐÐLaravel MixºÍWebpack¡£npm run dev½«Æô¶¯Laravel MixµÄ¿ª·¢Ä£Ê½£¬Ëü½«¶ÔÊä³öÎļþ¾ÙÐÐ×îС»¯´¦Àí£¬²¢ÌṩʵʱÖØмÓÔع¦Ð§¡£npm run production½«Æô¶¯Éú²úģʽ£¬Ëü½«¶ÔÊä³öÎļþ¾ÙÐÐÓÅ»¯ºÍѹËõ´¦Àí£¬²¢ÔÚÊä³öÎļþÖÐÌí¼ÓhashÖµ¡£

×îºó£¬Äú¿ÉÒÔʹÓÃLaravel MixºÍWebpackÀ´Ò»Á¬ÓÅ»¯ÄúµÄWebÓ¦ÓóÌÐò¡£Í¨¹ýºÏ²¢ºÍѹËõÎļþ£¬Äú¿ÉÒÔïÔÌ­Ò³Ãæ¼ÓÔØʱ¼ä£¬²¢Ìá¸ßÓû§ÌåÑé¡£

ÒÔÉϾÍÊÇLaravel¿ª·¢£ºÔõÑùʹÓÃLaravel MixºÍWebpackÓÅ»¯Îļþ´óС£¿µÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡

ÃâÔð˵Ã÷£ºÒÔÉÏչʾÄÚÈÝȪԴÓÚÏàÖúýÌå¡¢ÆóÒµ»ú¹¹¡¢ÍøÓÑÌṩ»òÍøÂçÍøÂçÕûÀí£¬°æȨÕùÒéÓë±¾Õ¾Î޹أ¬ÎÄÕÂÉæ¼°¿´·¨Óë¿´·¨²»´ú±í×ðÁú¿­Ê±¹ÙÍøµÇ¼ÂËÓÍ»úÍø¹Ù·½Ì¬¶È£¬Çë¶ÁÕß½ö×ö²Î¿¼¡£±¾ÎĽӴýתÔØ£¬×ªÔØÇë˵Ã÷À´ÓÉ¡£ÈôÄúÒÔΪ±¾ÎÄÇÖÕ¼ÁËÄúµÄ°æȨÐÅÏ¢£¬»òÄú·¢Ã÷¸ÃÄÚÈÝÓÐÈκÎÉæ¼°ÓÐÎ¥¹«µÂ¡¢Ã°·¸Ö´·¨µÈÎ¥·¨ÐÅÏ¢£¬ÇëÄúÁ¬Ã¦ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼ʵʱÐÞÕý»òɾ³ý¡£

Ïà¹ØÐÂÎÅ

ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼

18523999891

¿É΢ÐÅÔÚÏß×Éѯ

ÊÂÇéʱ¼ä£ºÖÜÒ»ÖÁÖÜÎ壬9:30-18:30£¬½ÚãåÈÕÐÝÏ¢

QR code
ÍøÕ¾µØͼ