這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在Laravel中自定義webpack.mix.js，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司主營(yíng)清河網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開發(fā)公司,清河h5重慶小程序開發(fā)搭建,清河網(wǎng)站營(yíng)銷推廣歡迎清河等地區(qū)企業(yè)咨詢

Laravel自定義webpack.mix.js

我們?cè)谑褂?code>laravel構(gòu)建項(xiàng)目時(shí)，經(jīng)常會(huì)把后臺(tái)管理及前臺(tái)放在同一個(gè)laravel項(xiàng)目中。

但是當(dāng)這兩個(gè)項(xiàng)目都需要用到laravel-mix構(gòu)建時(shí)，我們希望通過運(yùn)行不同的npm命令區(qū)分后臺(tái)及前臺(tái)。

考慮混合在一起的情況：

//webpack.mix.js

const { mix } = require('laravel-mix');

    //前臺(tái)資源打包到 /public/js/index.js
mix.js('resources/assets/js/app.js', 'js/index.js')
    //后臺(tái)資源打包到 /public/js/admin/index.js
   .js('resources/assets/js/admin/index.js', 'js/admin/');

在webpack.mix.js中，我們把后臺(tái)和前臺(tái)資源文件寫在同一個(gè)配置文件中，這樣你只需運(yùn)行npm run dev，資源文件就能自動(dòng)打包了。

但是當(dāng)只你想更新前臺(tái)資源文件時(shí)，后臺(tái)資源文件不得不一起被動(dòng)更新。

解決方案

在根目錄定義兩個(gè)配置文件

1. webpack.mix.js //默認(rèn)已存在

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/');
//其他后臺(tái)資源配置

確認(rèn)已安裝完node依賴，并在根目錄執(zhí)行

npm run dev -- --env.admin //打包后端資源
npm run dev                //默認(rèn)打包前端資源

若嫌每次都帶參數(shù)太麻煩，可更新package.json文件，帶上env參數(shù)（最后面）

"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"
}

接下來直接運(yùn)行npm run dev-admin就能打包后端資源。

注意，

當(dāng)webpack.mix.js及webpack.admin.js沒有指定不同的mix.setPublicPath(path)時(shí)，默認(rèn)的打包文件都會(huì)放到/public目錄下，這樣每次打包都會(huì)覆蓋mix-manifest.json的值。

最好的方法時(shí)前臺(tái)及后臺(tái)指定不同的目錄，

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了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：怎么在Laravel中自定義webpack.mix.js
文章URL：http://www.chinadenli.net/article34/jcojpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、、網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、外貿(mào)建站、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)