• 技术文章 >php框架 >Laravel

    Laravel怎么自定义webpack.mix.js

    藏色散人藏色散人2021-04-02 08:57:52转载115
    下面由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,资源文件就能自动打包了。

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

    解决方案

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

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

    后端资源打包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.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;
        # ....
    }

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

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

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

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

    以上就是Laravel怎么自定义webpack.mix.js的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:segmentfault,如有侵犯,请联系a@php.cn删除
    专题推荐:laravel webpack
    上一篇:总结Homestead中使用laravel-mix问题 下一篇:总结laravel中$request获取请求信息用法
    第15期线上培训班

    相关文章推荐

    • Laravel中轻松输出完整的SQL语句• 如何让你的Laravel在15毫秒内返回一个"hello world!"• 详解Laravel Seeder如何生成百万模拟数据• 详解Laravel路由之domain解决多域名问题• 总结Homestead中使用laravel-mix问题

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网