Laravel 自定義 webpack.mix.js

godruoyi發表於2017-08-01
LaravelWebJS

file
![圖片描述][1]

我們在使用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.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
const { mix } = require('laravel-mix');

mix.setPublicPath('public-admin');

//打包後端資原始檔到 /public-admin/js/admin/index-{version}.js
mix.js('resources/assets/js/admin/index.js', 'js/admin/').version();

測試時laravel-mix:^0.11.4， laravel:5.4.*，若你有更好的解決方案。

二楞徐的閒談雜魚

相關文章