require("laravel-mix-alias"); const mix = require("laravel-mix"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const ENTRY_PATH = "resources/assets"; const PUBLIC_PATH = "public/assets"; const Entry = { app: { js: `${ENTRY_PATH}/app/js`, sass: `${ENTRY_PATH}/app/sass` }, vendor: { js: `${ENTRY_PATH}/vendor/js`, sass: `${ENTRY_PATH}/vendor/sass` } }; const Output = { js: `${PUBLIC_PATH}/js/`, css: `${PUBLIC_PATH}/css`, font: `${PUBLIC_PATH}/font`, image: `${PUBLIC_PATH}/img` }; mix.config.fileLoaderDirs.fonts = "assets/font"; mix.config.fileLoaderDirs.images = "assets/img"; /* |-------------------------------------------------------------------------- | 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.alias({ "@": `./${ENTRY_PATH}/app/js`, "@pages": `./${ENTRY_PATH}/app/js/pages`, "@layout": `./${ENTRY_PATH}/app/js/layout`, "@img": `./${ENTRY_PATH}/app/img`, "@components": `./${ENTRY_PATH}/app/js/components`, "@sass": `./${ENTRY_PATH}/app/sass` }); mix.webpackConfig({ output: { chunkFilename: `assets/js/[name].[hash].js` }, plugins: [ new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: [`./${PUBLIC_PATH}/*`] }) ] }); // mix.disableNotifications(); mix.babelConfig({ presets: [ [ "@babel/preset-env", { useBuiltIns: "usage", corejs: 3 } ] ], plugins: ["@babel/plugin-syntax-dynamic-import"] }); mix.js(`${Entry.app.js}/index.js`, `${Output.js}/app.js`) .sass(`${Entry.app.sass}/index.scss`, `${Output.css}/app.css`) .options({ processUrls: true, processCssUrls: true }); mix.js(`${Entry.vendor.js}/index.js`, `${Output.js}/vendor.js`) .sass(`${Entry.vendor.sass}/index.scss`, `${Output.css}/vendor.css`) .options({ processUrls: true, processCssUrls: true }); mix.version();