如何混合多个入口点并同时观看 laravel mix

Question

我已经像这样拆分了前端和管理 webpack.mix 文件：

webpack.mix.js：

let mix = require('laravel-mix');

if (process.env.section) {
    require(`${__dirname}/webpack.mix.${process.env.section}.js`);
}

Then a seperare webpack.mix.admin.js and webpack.mix.website.js file for controlling the mix with the following in package.json:

  "scripts": {
    "dev": "npm run development",
    "development": "cross-env process.env.section=website NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env process.env.section=website NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env process.env.section=website NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env process.env.section=website NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "admin-dev": "npm run admin-development",
    "admin-development": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "admin-watch": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "admin-watch-poll": "npm run admin-watch -- --watch-poll",
    "admin-hot": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "admin-prod": "npm run admin-production",
    "admin-production": "cross-env process.env.section=admin NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

webpack.mix.app.js

mix.js('resources/app/js/app.js', 'public/app/js')
    .webpackConfig({
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'resources/app/js/src'),
                '@assets': path.resolve(__dirname, 'resources/app/assets'),
                '@sass': path.resolve(__dirname, 'resources/app/sass')
            }
        },
        output: {
            chunkFilename: 'app/js/chunks/[name].js',
        }
    })
    .sass('resources/app/sass/app.scss', 'public/app/css').options({
        postCss:[require('autoprefixer'), require('postcss-rtl')]
    })
    .postCss('resources/app/assets/css/main.css', 'public/app/css', [
        tailwindcss('tailwind.js'), require('postcss-rtl')()
    ])
    .copy('node_modules/vuesax/dist/vuesax.css', 'public/app/css/vuesax.css') // Vuesax framework css
    .copy('node_modules/prismjs/themes/prism-tomorrow.css', 'public/app/css/prism-tomorrow.css') // Prism Tomorrow theme css
    .copy('resources/app/assets/css/iconfont.css', 'public/app/css/iconfont.css') // Feather Icon Font css
    .copyDirectory('resources/app/assets/fonts', 'public/app/fonts') // Feather Icon fonts
    .copyDirectory('node_modules/material-icons/iconfont', 'public/app/css/material-icons') // Material Icon fonts
    .copyDirectory('node_modules/material-icons/iconfont/material-icons.css', 'public/app/css/material-icons/material-icons.css') // Material Icon fonts css
    .copyDirectory('resources/app/assets/images', 'public/app/images')

webpack.mix.admin.js

mix.js('resources/admin/js/app.js', 'public/admin/js')
    .webpackConfig({
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'resources/admin/js/src'),
                '@assets': path.resolve(__dirname, 'resources/admin/assets'),
                '@sass': path.resolve(__dirname, 'resources/admin/sass')
            }
        },
        output: {
            chunkFilename: 'admin/js/chunks/[name].js',
        }
    })
    .sass('resources/admin/sass/app.scss', 'public/admin/css').options({
        postCss:[require('autoprefixer'), require('postcss-rtl')]
    })
    .postCss('resources/admin/assets/css/main.css', 'public/admin/css', [
        tailwindcss('tailwind.js'), require('postcss-rtl')()
    ])
    .copy('node_modules/vuesax/dist/vuesax.css', 'public/admin/css/vuesax.css') // Vuesax framework css
    .copy('node_modules/prismjs/themes/prism-tomorrow.css', 'public/admin/css/prism-tomorrow.css') // Prism Tomorrow theme css
    .copy('resources/admin/assets/css/iconfont.css', 'public/admin/css/iconfont.css') // Feather Icon Font css
    .copyDirectory('resources/admin/assets/fonts', 'public/admin/fonts') // Feather Icon fonts
    .copyDirectory('node_modules/material-icons/iconfont', 'public/admin/css/material-icons') // Material Icon fonts
    .copyDirectory('node_modules/material-icons/iconfont/material-icons.css', 'public/admin/css/material-icons/material-icons.css') // Material Icon fonts css
    .copyDirectory('resources/admin/assets/images', 'public/admin/images')

一切运行良好，但我只能在前端运行 npm run watch 时，我希望同时查看前端和管理文件的更改。

我试过 npm run watch & npm run admin-watch 但后者被忽略了

目前我正在查看前端文件并在需要时运行 npm run admin-prod 但这开始有点令人沮丧

Answer 1

您可以同时使用此功能。 https://www.npmjs.com/package/concurrently

运行npm install concurrently

然后像这样更新您的脚本部分：

"scripts": {
    "watch": "concurrently \"npm run admin-watch\" \"npm run watch\"",

Answer 2

这种情况会奏效。

package.json

    "scripts": {
        "dev": "npm run development",
        "dev:admin": "cross-env THEME=admin npm run dev",
        "dev:app": "cross-env THEME=app npm run dev",
    },

webpack.mix.js

    if (!process.env.THEME || process.env.THEME === "app") {
        mix.js('resources/app/js/app.js', 'public/app/js');
    }
    
    if (!process.env.THEME || process.env.THEME === "admin") {
        mix.js('resources/admin/js/app.js', 'public/admin/js');
    }

命令：

管理员

npm run dev:admin

应用程序

npm run dev:app

管理和应用

npm run dev