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ÓÅ»¯Îļþ´óС£¿µÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡