尊龙凯时人生就是博

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
sitemap¡¢ÍøÕ¾µØͼ