make two js file ( app.js admin.js ) seperate..

hi .

Actually it is adopted from Inertiajs webpack.mix.js ( pingcrm )

I just added admin.js / admin.css

  .js('resources/js/admin.js', 'public/admin-part/js')
  .postCss('resources/css/admin.css', 'public/admin-part/css/admin.css')

and I wanted two admin files settle down on 'admin-part' directory cause of webpack chunkFiles..

I have app.blade.php for front side and admin-app.blade.php for administration .

<!DOCTYPE html>
<html class="h-full bg-gray-200">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link href="{{ mix('/admin-part/css/app.css') }}" rel="stylesheet">
    <script src="{{ mix('/admin-part/js/app.js') }}" defer></script>
    @routes
</head>
<body class="font-sans leading-none text-gray-700 bg-gray-900 antialiased">

@inertia

</body>
</html>

How can I make admin js & admin css to another directoy ( /public/admin-part/ ) ?

Can someone help me ?

The following is the webpack.mix.js

const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
const mix = require('laravel-mix')
const path = require('path')
const purgecss = require('@fullhuman/postcss-purgecss')
const tailwindcss = require('tailwindcss')
var LiveReloadPlugin = require('webpack-livereload-plugin');

mix.js('resources/js/app.js', 'public/js')
  .js('resources/js/admin.js', 'public/admin-part/js')
  .postCss('resources/css/app.css', 'public/css/app.css')
  .postCss('resources/css/admin.css', 'public/admin-part/css/admin.css')
  .options({
    postCss: [
      cssImport(),
      cssNesting(),
      tailwindcss('tailwind.config.js'),
      ...mix.inProduction() ? [
        purgecss({
          content: ['./resources/views/**/*.blade.php', './resources/js/**/*.vue'],
          defaultExtractor: content => content.match(/[\w-/:.]+(?<!:)/g) || [],
          whitelistPatternsChildren: [/nprogress/],
        }),
      ] : [],
    ],
  })
  .webpackConfig({
    output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.runtime.esm.js',
        '@': path.resolve('resources/js'),
      },
    },
    plugins: [new LiveReloadPlugin()],
  })
  .version()
  .sourceMaps()

Sinnbeck

6 years ago

Level 102

It looks fine. But what isn't working? Does it put it in the wrong directory, or do you get an error?

Please or to participate in this conversation.