Php Laravel Mix多个入口点生成一个manifest.js
我目前在尝试在混合文件中使用多个入口点时遇到问题Php Laravel Mix多个入口点生成一个manifest.js,php,laravel,laravel-mix,Php,Laravel,Laravel Mix,我目前在尝试在混合文件中使用多个入口点时遇到问题 // Mix frontend resources. mix.js('resources/assets/js/app.js', 'public/js') .extract([ 'jquery', 'bootstrap', 'aos', 'lity', ]); ... // Mix app resources. mix.js('resources/assets/app/js/app.js', 'public/ap
// Mix frontend resources.
mix.js('resources/assets/js/app.js', 'public/js')
.extract([
'jquery', 'bootstrap', 'aos', 'lity',
]);
...
// Mix app resources.
mix.js('resources/assets/app/js/app.js', 'public/app/js');
我的Mix文件中有三个入口点。一个用于前端、后端和我的“公共应用程序”文件。上面的代码将我的前端vendor.js
和manifest.js
文件存储在public/app/js
中,而它应该在public/js
中
当我尝试引用
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('app/js/app.js') }}"></script>
当前是否有一种方法可以在混合文件中使用多个入口点?在package.jsone文件中添加“gulp”:“^3.9.1”
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "0.*",
"lodash": "^4.17.4",
"gulp": "^3.9.1",
"vue": "^2.1.10"
},
并在webpack.mix.js文件中添加以下代码
const { mix } = require('laravel-mix');
mix.scripts([
'resources/assets/js/app.js'
], 'public/js/manifest.js')//Combine All JS files into one file
.minify();
然后为minify js运行以下命令
npm run production
{{HTML::script('public/js/manifest.js')}
{{HTML::script('app/js/app.js')}为了为后端和前端(以及其他入口点,如果需要)创建一个混合文件,请调整
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",
"prod": "npm run production",
"production": "cross-env process.env.section=website NODE_ENV=production node_modules/webpack/bin/webpack.js --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-prod": "npm run admin-production",
"admin-production": "cross-env process.env.section=admin NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
webpack.mix.js:
let mix = require('laravel-mix');
if (process.env.section) {
require(`${__dirname}/webpack.mix.${process.env.section}.js`);
}
创建webpack.mix.website.js:
let { mix } = require('laravel-mix');
mix
.setPublicPath(path.normalize('public_html/assets/website'))
.less('resources/assets/website/less/website.less', 'css/style.css')
.options({
processCssUrls: false
})
.js('resources/assets/website/js/website.js', 'js/global.js')
;
创建webpack.mix.admin.js:
let mix = require('laravel-mix');
mix
.setPublicPath(path.normalize('public_html/assets/admin'))
.options({
processCssUrls: false
})
.js('resources/assets/admin/js/admin.js', 'js/global.js')
.less('resources/assets/admin/less/admin.less', 'css/style.css')
;
这是当前为不同目录级别上的多个入口点创建多个清单文件等的唯一方法。如果不同目录级别上有不同的入口点,则此方法无效。Laravel Mix仍然缺少此功能,因此我用一个解决方法回答了自己的问题:如何使用网页包延迟加载功能实现此功能?谢谢,你救了我一天;)在Laravel 5.5中实现了这一点。管理员和网站编译工作正常,但会覆盖manifest.json文件。有人注意到这个问题吗?有没有关于它背后的原因的建议?这会覆盖清单,这意味着你网站的一部分将永远不会加载…你可以使用合并清单文件
let mix = require('laravel-mix');
mix
.setPublicPath(path.normalize('public_html/assets/admin'))
.options({
processCssUrls: false
})
.js('resources/assets/admin/js/admin.js', 'js/global.js')
.less('resources/assets/admin/less/admin.less', 'css/style.css')
;