Laravel怎么自定义webpack.mix.js_网络技术_宿州市腾雀网络科技有限公司

Laravel怎么自定义webpack.mix.js

发布时间 - 2021-04-01 00:00:00 点击率：次

下面由laravel教程栏目给大家介绍laravel怎么自定义webpack.mix.js，希望对需要的朋友有所帮助！

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-mix:^0.11.4， laravel:5.4.*，若你有更好的解决方案。那你还在....【推荐：最新的五个Laravel视频教程】

# laravel # json # npm # webpack # public # JS # 就能 # 后端 # 自定义 # 配置文件 # 放在 # 还在 # 最好的 # 只需 # 你想 # 并在

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：凤凰新闻进入凤凰卫视资讯台教程

下一篇：Android编程调用Camera和相册功能详解

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：凤凰新闻进入凤凰卫视资讯台教程

下一篇：Android编程调用Camera和相册功能详解