Home > PHP Framework > Laravel > body text

How to customize webpack.mix.js in Laravel

藏色散人
Release: 2021-04-02 08:57:52
forward
2625 people have browsed it

下面由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/');
Copy after login

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');
//其他前端资源
Copy after login

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

//webpack.admin.js
const { mix } = require('laravel-mix');

mix.js('resources/assets/js/admin/index.js', 'js/admin/');
//其他后台资源配置
Copy after login

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

npm run dev -- --env.admin //打包后端资源
npm run dev                //默认打包前端资源
Copy after login

若嫌每次都带参数太麻烦,可更新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"
}
Copy after login

接下来直接运行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;
    # ....
}
Copy after login

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

//webpack.admin.js
mix.setPublicPath('public-admin');
//...
Copy after login

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

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

The above is the detailed content of How to customize webpack.mix.js in Laravel. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template