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

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

laravelÊÇÒ»¿îÊ¢ÐеÄphp webÓ¦ÓóÌÐò¿ò¼Ü £¬ÓµÓмòÆÓÒ×ÓᢸßЧÎÞа¡¢À©Õ¹ÐÔÇ¿µÈÖî¶àÌص㠣¬±»Ðí¶àweb¿ª·¢ÕßËùÇàíù¡£ÆäÖÐ £¬laravel mixºÍwebpackÊÇlaravel¿ò¼ÜÖÐ×îÊܽӴýµÄÇ°¶Ë¹¹½¨¹¤¾ßÖ®Ò» £¬±¾ÎĽ«ÏÈÈÝÔõÑùʹÓÃlaravel mixºÍwebpackÓÅ»¯Ç°¶Ë×ÊÔ´¡£

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

Laravel MixÊÇÒ»¸ö»ùÓÚWebpackµÄÇ°¶Ë¹¹½¨¹¤¾ß £¬¿ÉÒÔΪLaravelÓ¦ÓóÌÐòÌṩ¼òÆÓÒ×ÓõÄAPI £¬ÒÔ¼°Ðí¶à³£¼ûµÄWebpackÉèÖÃÑ¡Ïͨ¹ýLaravel Mix £¬ÄúÎÞÐèÖØ´óµÄWebpackÉèÖü´¿É¶ÔÇ°¶Ë×ÊÔ´¾ÙÐй¹½¨ºÍ±àÒë¡£ºÃ±È £¬¿ÉÒÔʹÓÃLaravel Mix±àÒëCSS¡¢Sass¡¢LESSµÈÎļþ £¬Ñ¹ËõJavaScriptÒÔ¼°¾ÙÐÐͼƬÓÅ»¯µÈ¡£

WebpackÊÇÒ»¸öÏÖ´úJavaScriptÓ¦ÓóÌÐòµÄÄ£¿é´ò°ü¹¤¾ß £¬¿ÉÒÔ½«Öݪֲî±ðÀàÐ͵Ä×ÊÔ´£¨ÈçJavaScript¡¢CSS¡¢Í¼Æ¬µÈ£©´ò°üÔÚÒ»Æ𠣬²¢ÎªËüÃÇÌìÉúÓÅ»¯µÄ¾²Ì¬Îļþ¡£Ê¹ÓÃWebpack¿ÉÒÔÌá¸ßÇ°¶ËÓ¦ÓóÌÐòµÄÐÔÄܺͿɿ¿ÐÔ £¬²¢ÇÒʹµÃ´úÂë¸üÈÝÒ×ά»¤¡£

¶þ¡¢Ê¹ÓÃLaravel MixºÍWebpackÓÅ»¯Ç°¶Ë×ÊÔ´

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

×°ÖúÍÉèÖÃLaravel Mix

Ê×ÏÈ £¬ÔÚLaravelÓ¦ÓóÌÐòÖÐ×°ÖÃLaravel MixºÍWebpack£º

npm install laravel-mix --save-dev

npm install webpack --save-dev

µÇ¼ºó¸´ÖÆ

×°ÖÃÍê³ÉÖ®ºó £¬ÄúÐèÒªÔÚLaravelÓ¦ÓóÌÐòµÄwebpack.mix.jsÎļþÖÐÉèÖÃLaravel Mix£º

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

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

µÇ¼ºó¸´ÖÆ

ÉÏÊöÉèÖÃÖ¸¶¨Á˱àÒëapp.jsºÍapp.scssÎļþ £¬½«Æä»®·ÖÊä³öµ½public/jsºÍpublic/cssĿ¼Ï¡£

±à¼­webpack.mix.jsÎļþ

ÔÚwebpack.mix.jsÎļþÖÐ £¬Äú¿ÉÒÔʹÓÃÖÖÖÖÉèÖÃÑ¡ÏîÀ´¶¨ÖÆLaravel MixµÄÐÐΪ¡£ÀýÈç £¬Äú¿ÉÒÔÖ¸¶¨ÊäÈëºÍÊä³öĿ¼¡¢Ö¸¶¨Òª±àÒëµÄÎļþÀàÐÍ¡¢ÉèÖÃSource Maps¡¢ÐÞ¸ÄWebЧÀÍÆ÷ÉèÖõÈ¡£

ÏÂÃæÊÇÒ»¸öwebpack.mix.jsÎļþµÄʾÀý£º

let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({
       processCssUrls: false,
       postCss: [
           require('autoprefixer')
       ]
   })
   .webpackConfig({
       output: {
           publicPath: '/',
           chunkFilename: 'js/[name].chunk.js'
       },
       resolve: {
           extensions: ['.js', '.vue', '.json'],
           alias: {
               'vue$': 'vue/dist/vue.esm.js',
               '@': __dirname + '/resources'
           }
       }
   });

µÇ¼ºó¸´ÖÆ

ÉÏÊöʾÀýÖÐ £¬ÎÒÃÇʹÓÃÁËoptions()ºÍwebpackConfig()ÒªÁìÀ´Ö¸¶¨Ò»Ð©³£ÓõÄWebpackÑ¡Ïî¡£ÀýÈç £¬processCssUrlsÓÃÀ´Ö¸¶¨ÊÇ·ñ´¦ÀíCSSÎļþÖеÄURLÁ´½Ó £¬postCss¿ÉÒÔÓÃÀ´¼ÓÈëAutoprefixerµÈ²å¼þ £¬webpackConfigÓÃÀ´Ö¸¶¨Êä³öÎļþµÄpublicPathºÍchunkFilename £¬resolveÊÇÓÃÀ´ÉèÖÃÏîÄ¿Öз¾¶µÄÓÖÃû¡£

×îÏÈʹÓÃLaravel MixºÍWebpack

ʹÓÃLaravel MixºÜ¼òÆÓ £¬Ö»ÐèÒªÔÚÖնˣ¨ÏÂÁîÊ䣩ÖÐÔËÐÐÒÔÏÂÏÂÁî¼´¿É£º

npm run dev

µÇ¼ºó¸´ÖÆ

Õ⽫ʹÓÃWebpack±àÒëºÍ´ò°üÄúµÄÇ°¶Ë×ÊÔ´ £¬²¢½«ËüÃÇÊä³öµ½ÄúÖ¸¶¨µÄĿ¼¡£ÈôÊÇÄúÏ£ÍûLaravel MixÔÚÎļþ±¬·¢¸ü¸ÄʱÖØбàÒëÇ°¶Ë×ÊÔ´ £¬Ôò¿ÉÒÔÔËÐÐÒÔÏÂÏÂÁ

npm run watch

µÇ¼ºó¸´ÖÆ

¸ß¼¶Ó÷¨

ÉÏÊöʾÀýÖÐ £¬ÎÒÃÇÏÈÈÝÁËLaravel MixµÄһЩ³£ÓÃÒªÁìºÍÑ¡ÏȻ¶ø £¬Laravel Mix»¹ÌṩÁËÐí¶à¸ß¼¶Ó÷¨ £¬ÀýÈç £¬Äú¿ÉÒÔʹÓÃMix.extend()ÒªÁìÀ´À©Õ¹Laravel MixµÄĬÈÏÐÐΪ £¬²¢ÔÚWebpackÉèÖÃÖÐÌí¼Ó×Ô½ç˵µÄ²å¼þºÍÄ£¿é¡£±ðµÄ £¬Äú»¹¿ÉÒÔʹÓÃMix.manifest()ÒªÁìÀ´ÌìÉúÇ°¶Ë×ÊÔ´Çåµ¥ £¬ÒÔ±ãÓëLaravelÓ¦ÓóÌÐòµÄ»º´æ»úÖƼ¯³É¡£

Èý¡¢×ܽá

Laravel MixºÍWebpackÊÇÒ»¶ÔºÜÊÇÇ¿Ê¢ºÍÎÞаµÄÇ°¶Ë¹¹½¨¹¤¾ß £¬Äܹ»ÓÅ»¯Ç°¶Ë×ÊÔ´¡¢Ìá¸ßÓ¦ÓóÌÐòµÄÐÔÄܺͿɿ¿ÐÔ £¬ÒÔ¼°Ê¹µÃ´úÂë¸üÈÝÒ×ά»¤¡£Ê¹ÓÃÕâÁ½¸ö¹¤¾ß £¬²»µ«¿ÉÒÔ±àÒëºÍѹËõÇ°¶Ë×ÊÔ´ £¬»¹¿ÉÒÔÓÅ»¯Í¼Æ¬¡¢´¦ÀíCSSµÈµÈ £¬Ìá¸ßÓ¦ÓõÄÏìÓ¦ËÙÂʺÍÓû§ÌåÑ顣ϣÍûÄúÄܹ»ÉÆÓÃLaravel MixºÍWebpackÀ´¹¹½¨³öÔ½·¢ÍêÉÆ¡¢¸ßЧµÄWebÓ¦ÓóÌÐò¡£

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

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

Ïà¹ØÐÂÎÅ

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

18523999891

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

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

QR code
ÍøÕ¾µØͼ