下面由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視頻教程】
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
