尊龙凯时人生就是搏

Laravel¿ª·¢£ºÔõÑùʹÓÃLaravel MixºÍWebpack´ò°üÇ°¶Ë×ÊÔ´£¿

laravelÊÇÒ»¿îÊ¢ÐеÄphp webÓ¦ÓóÌÐò¿ò¼Ü£¬ËüÒÔ¼òÆÓ¡¢ÓÅÑź͸ßЧ¶øÖø³Æ¡£ÔÚlaravelµÄ¿ª·¢Àú³ÌÖУ¬Ç°¶Ë×ÊÔ´µÄÖÎÀíºÍ´ò°üÒ²ÊǺÜÊÇÖ÷ÒªµÄÒ»²¿·Ö¡£ÔÚ±¾ÎÄÖУ¬ÎÒ½«ÏÈÈÝÔõÑùʹÓÃlaravel mixºÍwebpackÀ´ÖÎÀíºÍ´ò°üÇ°¶Ë×ÊÔ´¡£

Ò»¡¢Ê²Ã´ÊÇLaravel MixºÍWebpack

Laravel MixÊÇÒ»¸öÓÉLaravel¿ª·¢ÍŶӽ¨ÉèµÄʹÓÃWebpackÀ´±àÒëºÍ´ò°üÇ°¶Ë×ÊÔ´µÄ¼òÆÓAPI¡£Ëü¿ÉÒÔ×ÊÖú¿ª·¢ÕßÇáËÉʹÓÃWebpackÀ´±àÒëES2015¡¢Less¡¢Sass¡¢StylusµÈÇ°¶Ë×ÊÔ´¡£Í¬Ê±£¬LaravelMix»¹ÌṩÁËһЩ³£¼ûµÄÇ°¶ËWebpack²å¼þºÍÑ¡ÏÀýÈç×Ô¶¯Ë¢Ð¡¢ÌáÈ¡CSSµÈ¡£

WebpackÊÇÒ»¸öÊ¢ÐеÄÄ£¿é´ò°ü¹¤¾ß£¬Ëü¿ÉÒÔ½«ÖÖÖÖÀàÐ͵ÄÇ°¶Ë×ÊÔ´£¬ÈçJavaScript¡¢CSS¡¢Í¼Æ¬µÈ£¬´ò°ü³ÉÒ»¸ö»ò¶à¸öJavaScriptÎļþ£¬ÒÔ±ãä¯ÀÀÆ÷¼ÓÔØ¡£Ê¹ÓÃWebpack¿ÉÒÔ¼«´óµØ¼ò»¯Ç°¶Ë¿ª·¢ºÍά»¤¡£

¶þ¡¢×°ÖúÍÉèÖÃLaravel Mix

Á¬Ã¦Ñ§Ï°¡°Ç°¶ËÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»

1¡¢×°ÖÃNode.jsºÍNPM

ÔÚ×îÏÈʹÓÃLaravel Mix֮ǰ£¬ÄãÐèҪȷ±£ÄãµÄµçÄÔÉÏÒѾ­×°ÖÃÁËNode.jsºÍNPM¡£Äã¿ÉÒÔÔÚNode.jsµÄ¹Ù·½ÍøÕ¾ÉÏÏÂÔز¢×°ÖÃNode.js¡£×°ÖÃÍêNode.jsºó£¬NPMÒ²»á±»Í¬Ê±×°Öá£

2¡¢×°ÖÃLaravel Mix

ÔÚÄãµÄLaravelÏîÄ¿ÖÐ×°ÖÃLaravel MixºÜÊǼòÆÓ¡£Äã¿ÉÒÔʹÓÃNPM×°ÖÃLaravel Mix£º

npm install --save-dev laravel-mix

µÇ¼ºó¸´ÖÆ

×°ÖÃÍê³Éºó£¬ÄãÐèÒªÔÚwebpack.mix.jsÎļþÖоÙÐÐһЩ»ù±¾ÉèÖá£ÔÚÄãµÄLaravelÏîÄ¿¸ùĿ¼Ï£¬Í¨¹ýÒÔÏÂÏÂÁîÀ´½¨ÉèÒ»¸öwebpack.mix.jsÎļþ£º

touch webpack.mix.js

µÇ¼ºó¸´ÖÆ

È»ºó£¬ÔÚwebpack.mix.jsÖÐÌí¼ÓÒÔÏÂÄÚÈÝ£º

let mix = require('laravel-mix');
 
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

µÇ¼ºó¸´ÖÆ

ÉÏÃæµÄ´úÂë¸æËßLaravel Mix£¬½«resources/js/app.jsÎļþ±àÒëΪpublic/js/app.jsÎļþ£¬½«resources/sass/app.scssÎļþ±àÒëΪpublic/css/app.cssÎļþ¡£

3¡¢ÔËÐÐLaravel Mix

ÔÚÄãÍê³ÉÁËwebpack.mix.jsµÄÉèÖúó£¬Äã¿ÉÒÔͨ¹ýÒÔÏÂÏÂÁîÀ´ÔËÐÐLaravel Mix£º

npm run dev

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

Õâ¸öÏÂÁ»á±àÒëÄãµÄÇ°¶Ë×ÊÔ´£¬²¢ÔÚpublicĿ¼ÏÂÌìÉú±àÒëºóµÄÎļþ¡£ÈôÊÇÄãÏëÔÚÉú²úÇéÐÎÖÐÔËÐÐLaravel Mix£¬Ôò¿ÉÒÔʹÓÃÒÔÏÂÏÂÁ

npm run prod

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

Õâ¸öÏÂÁ»á¶ÔÄãµÄÇ°¶Ë×ÊÔ´Ö´ÐÐÔ½·¢ÑÏ¿áµÄ±àÒëºÍѹËõ£¬ÒÔÈ·±£ÄãµÄÍøÕ¾Äܹ»¸ü¿ìµØ¼ÓÔØ¡£

Èý¡¢Ê¹ÓÃLaravel MixºÍWebpack´ò°üÇ°¶Ë×ÊÔ´

ÏÖÔÚ£¬ÎÒÃÇÒѾ­×¼±¸ºÃʹÓÃLaravel MixºÍWebpackÀ´´ò°üÇ°¶Ë×ÊÔ´ÁË¡£½ÓÏÂÀ´£¬ÎÒÃǽ«ÏêϸÏÈÈÝÔõÑùʹÓÃLaravel MixºÍWebpackÀ´´ò°üÄãµÄÇ°¶Ë×ÊÔ´¡£

1¡¢±àдǰ¶Ë×ÊÔ´

ÔÚʹÓÃLaravel Mix֮ǰ£¬ÄãÐèÒª±àдһЩǰ¶Ë×ÊÔ´£¬ÀýÈçJavaScript¡¢CSS¡¢Í¼Æ¬µÈ¡£Äã¿ÉÒÔ½«ÕâЩ×ÊÔ´´æ´¢ÔÚresourcesĿ¼Ï¡£

2¡¢ÐÞ¸Äwebpack.mix.jsÉèÖÃÎļþ

ÔÚ±àдÍêÇ°¶Ë×ÊÔ´ºó£¬ÄãÐèÒªÔÚwebpack.mix.jsÉèÖÃÎļþÖиæËßLaravel MixÔõÑù½«ÕâЩ×ÊÔ´´ò°ü¡£ÔÚÕâ¸öÎļþÖУ¬Äã¿ÉÒÔʹÓÃLaravel Mix APIÀ´±àÒëºÍ´ò°üÇ°¶Ë×ÊÔ´¡£

ÀýÈ磬ÈôÊÇÄãÏ뽫app.jsºÍapp.scss´ò°üΪapp.jsºÍapp.css£¬²¢½«ËüÃÇ´æ´¢ÔÚpublicĿ¼Ï£¬Äã¿ÉÒÔÕâÑùÀ´ÉèÖÃwebpack.mix.js£º

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

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

µÇ¼ºó¸´ÖÆ

ÉÏÃæµÄ´úÂë¸æËßLaravel Mix£¬½«resources/js/app.jsÎļþ±àÒëΪpublic/js/app.jsÎļþ£¬½«resources/sass/app.scssÎļþ±àÒëΪpublic/css/app.cssÎļþ¡£

3¡¢ÔËÐÐLaravel Mix

ÔÚÄãÍê³ÉÁËwebpack.mix.jsµÄÉèÖúó£¬Äã¿ÉÒÔͨ¹ýÒÔÏÂÏÂÁîÀ´ÔËÐÐLaravel Mix£º

npm run dev

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

Õâ¸öÏÂÁ»á±àÒëÄãµÄÇ°¶Ë×ÊÔ´£¬²¢ÔÚpublicĿ¼ÏÂÌìÉú±àÒëºóµÄÎļþ¡£ÈôÊÇÄãÏëÔÚÉú²úÇéÐÎÖÐÔËÐÐLaravel Mix£¬Ôò¿ÉÒÔʹÓÃÒÔÏÂÏÂÁ

npm run prod

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

Õâ¸öÏÂÁ»á¶ÔÄãµÄÇ°¶Ë×ÊÔ´Ö´ÐÐÔ½·¢ÑÏ¿áµÄ±àÒëºÍѹËõ£¬ÒÔÈ·±£ÄãµÄÍøÕ¾Äܹ»¸ü¿ìµØ¼ÓÔØ¡£

ËÄ¡¢×ܽá

ʹÓÃLaravel MixºÍWebpack´ò°üÇ°¶Ë×ÊÔ´ÊǺÜÊǼòÆӵġ£ÄãÖ»ÐèÒª±àдһЩǰ¶Ë×ÊÔ´£¬È»ºóÔÚwebpack.mix.jsÎļþÖÐÉèÖÃLaravel Mix¼´¿É¡£ÔÚ¿ª·¢Àú³ÌÖУ¬ÌØÊâÊÇÔÚʹÓÃһЩ½ÏÁ¿ÖØ´óµÄÇ°¶Ë×ÊԴʱ£¬Laravel MixºÍWebpack¿ÉÒÔΪÄã½ÚÔ¼´ó×Úʱ¼äºÍ¾«Éñ¡£

Ï£ÍûÕâƪÎÄÕÂÄܹ»×ÊÖúÄã¸üºÃµØʹÓÃLaravel MixºÍWebpackÀ´ÖÎÀíºÍ´ò°üÇ°¶Ë×ÊÔ´¡£

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

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

Ïà¹ØÐÂÎÅ

ÁªÏµ尊龙凯时人生就是搏

18523999891

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

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

QR code
sitemap¡¢ÍøÕ¾µØͼ