如何混合多个入口点并同时观看 laravel mix
Posted
技术标签:
【中文标题】如何混合多个入口点并同时观看 laravel mix【英文标题】:How to mix multiple entry points and watch at same time for laravel mix 【发布时间】:2020-11-08 23:20:52 【问题描述】:我已经像这样拆分了前端和管理 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 但这开始有点令人沮丧
【问题讨论】:
只打开两个终端,分别运行每个命令? 【参考方案1】:您可以同时使用此功能。 https://www.npmjs.com/package/concurrently
运行npm install concurrently
然后像这样更新您的脚本部分:
"scripts":
"watch": "concurrently \"npm run admin-watch\" \"npm run watch\"",
【讨论】:
【参考方案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
【讨论】:
以上是关于如何混合多个入口点并同时观看 laravel mix的主要内容,如果未能解决你的问题,请参考以下文章
对于 iOS,我可以混合和匹配以编程方式添加视图并同时使用情节提要吗?
如何对多个列上的数据集进行分组并同时进行不同的聚合? Python