laravel -микс: создать два js файла (приложение. js admin. js) с несколькими отдельными js файлами каждый - PullRequest
Новая
       7

laravel -микс: создать два js файла (приложение. js admin. js) с несколькими отдельными js файлами каждый

0 голосов
/ 02 февраля 2020

На самом деле оно взято из Inertia js webpack.mix. js (pingcrm)

Я только что добавил admin. js / admin. css 

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

и я хотел, чтобы два админ-файла располагались в директории 'admin-part' для веб-пакета chunkFiles ..

У меня есть app.blade. php для лицевой стороны и admin-app.blade. php для администрирования. 

<!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('/css/app.css') }}" rel="stylesheet">
    <script src="{{ mix('/js/app.js') }}" defer></script>
    @routes
</head>
<body class="font-sans leading-none text-gray-700 bg-gray-900 antialiased">

@inertia

</body>
</html>

<!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>

Как мне сделать admin js & admin css для другого директора (/ public / admin-part /)?

Может кто-нибудь помочь меня?

Ниже приводится 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()
...