符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这期内容当中小编将会给大家带来有关怎么在Laravel中自定义webpack.mix.js,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
创新互联公司主营清河网站建设的网络公司,主营网站建设方案,成都app软件开发公司,清河h5重庆小程序开发搭建,清河网站营销推广欢迎清河等地区企业咨询
Laravel自定义webpack.mix.js
我们在使用laravel
构建项目时,经常会把后台管理
及前台
放在同一个laravel
项目中。
但是当这两个项目都需要用到laravel-mix
构建时,我们希望通过运行不同的npm
命令区分后台及前台。
考虑混合在一起的情况:
//webpack.mix.js const { mix } = require('laravel-mix'); //前台资源打包到 /public/js/index.js mix.js('resources/assets/js/app.js', 'js/index.js') //后台资源打包到 /public/js/admin/index.js .js('resources/assets/js/admin/index.js', 'js/admin/');
在webpack.mix.js
中,我们把后台和前台资源文件写在同一个配置文件中,这样你只需运行npm run dev
,资源文件就能自动打包了。
但是当只你想更新前台资源文件时,后台资源文件不得不一起被动更新。
解决方案
在根目录定义两个配置文件
webpack.mix.js //默认已存在
webpack.admin.js
更新webpack.mix.js
使其支持env
。
//webpack.mix.js const { mix } = require('laravel-mix'); const { env } = require('minimist')(process.argv.slice(2)); if (env && env.admin) { require(`${__dirname}\\webpack.admin.js`); return; } mix.js('resources/assets/js/app.js', 'js/index.js'); //其他前端资源
后端资源打包webpack.admin.js
配置
//webpack.admin.js const { mix } = require('laravel-mix'); mix.js('resources/assets/js/admin/index.js', 'js/admin/'); //其他后台资源配置
确认已安装完node
依赖,并在根目录执行
npm run dev -- --env.admin //打包后端资源 npm run dev //默认打包前端资源
若嫌每次都带参数太麻烦,可更新package.json
文件,带上env
参数(最后面)
"scripts": { "dev-admin": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.admin" }
接下来直接运行npm run dev-admin
就能打包后端资源。
注意,
当webpack.mix.js
及webpack.admin.js
没有指定不同的mix.setPublicPath(path)
时,默认的打包文件都会放到/public
目录下,这样每次打包都会覆盖mix-manifest.json
的值。
最好的方法时前台及后台指定不同的目录,
server { server_name admin.domain.com; index index.php; root /data/your/site/public-admin; # .... } server { server_name domain.com; root /data/your/site/public; index index.php; # .... }
这样你只需要在webpack.admin.js
指定publicPath
就能避免mix-manifest.json
被覆盖的问题。
//webpack.admin.js mix.setPublicPath('public-admin'); //...
上述就是小编为大家分享的怎么在Laravel中自定义webpack.mix.js了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。