Maison> cadre php> Laravel> le corps du texte

Comment personnaliser webpack.mix.js dans Laravel

藏色散人
Libérer: 2021-04-02 08:57:52
avant
2563 Les gens l'ont consulté

下面由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/');
Copier après la connexion

webpack.mix.js中,我们把后台和前台资源文件写在同一个配置文件中,这样你只需运行npm run dev,资源文件就能自动打包了。

但是当只你想更新前台资源文件时,后台资源文件不得不一起被动更新。

解决方案

在根目录定义两个配置文件

  1. webpack.mix.js //默认已存在
  2. 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'); //其他前端资源
Copier après la connexion

后端资源打包webpack.admin.js配置

//webpack.admin.js const { mix } = require('laravel-mix'); mix.js('resources/assets/js/admin/index.js', 'js/admin/'); //其他后台资源配置
Copier après la connexion

确认已安装完node依赖,并在根目录执行

npm run dev -- --env.admin //打包后端资源 npm run dev //默认打包前端资源
Copier après la connexion

若嫌每次都带参数太麻烦,可更新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" }
Copier après la connexion

接下来直接运行npm run dev-admin就能打包后端资源。

注意,

webpack.mix.jswebpack.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; # .... }
Copier après la connexion

这样你只需要在webpack.admin.js指定publicPath就能避免mix-manifest.json被覆盖的问题。

//webpack.admin.js mix.setPublicPath('public-admin'); //...
Copier après la connexion

测试时laravel-mix:^0.11.4laravel:5.4.*,若你有更好的解决方案。那你还在....

【推荐:最新的五个Laravel视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!