در حال ساخت پکیج برای سایت باناشر بودم و میخواستم برای هندل کردن فایل‌های asset از وب‌پک استفاده کنم.
قبل از اینکه نگاهی به فایل webpack.mix.js بندازیم. بیایم به ساختار پکیج نگاهی کنیم. (فقط قسمت های مهم رو آوردم)
package |- package.json |- webpack.mix.js |- /node_modules |- /src |- /Publishable |- /css |- /js |- /fonts |- /images |- mix-manifest.json
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.copy('node_modules/select2/dist/css/select2.min.css','src/Publishable/css/select2.min.css')
.copy('src/resources/panel/js/chart.min.js','src/Publishable/js/chart.min.js')
.sass('src/resources/sass/panel.scss', 'css')
.js('src/resources/js/panel.js', 'js');
حالا مشکلی که وجود داشت این بود که وقتی sass و js اجرا میشدن و میمود فایل‌ها رو کامپایل می‌کرد. و این کامپایلر به صورت پیش فرض میاد و url های داخل css رو میخونه (مگر اینکه غیر فعالش کنید)
مثلا در فایل panel.scss اینو داشتم
@import '~bootstrap/dist/css/bootstrap.css';
و داخل این فایل فونت تعریف میشه:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
وقتی npm run dev رو بزنید میاد و فولدر fonts و images رو در root directory میسازه. در حالی که من میخواستم در src/Publishable باشه. (چون در ServiceProvider گفتم که بیاد و تمامی فایل های داخل این فولدر رو بریزه در public)
اولین راه حل این بود
mix.config.publicPath='src/Publishable';
ولی واسه من رو js کار نمیکرد.
و اومدم از این استفاده کردم
mix.setPublicPath(path.normalize('src/Publishable/'));
لینک های که دیدم تا به این نقطه رسیدم.
https://github.com/JeffreyWay/laravel-mix/issues/1139
https://github.com/JeffreyWay/laravel-mix/issues/1757
https://webpack.js.org/guides/public-path/
https://chriscourses.com/blog/loading-fonts-webpack
https://github.com/webpack-contrib/css-loader/issues/665
https://github.com/vuejs-templates/webpack/issues/1284
https://github.com/vuejs-templates/webpack/issues/1266
https://developerhowto.com/2018/11/12/how-to-change-the-laravel-public-folder/
تا کنون 0 نظر به ثبت رسیده است