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