Laravel Mix 多个入口点生成一个 manifest.js

Laravel Mix multiple entry points generates one manifest.js

提问by Chris

I currently have a problem trying to use multiple entry points in my Mix file.

我目前在尝试在我的 Mix 文件中使用多个入口点时遇到问题。

// Mix frontend resources.
mix.js('resources/assets/js/app.js', 'public/js')
    .extract([
        'jquery', 'bootstrap', 'aos', 'lity',
    ]);

...

// Mix app resources.
mix.js('resources/assets/app/js/app.js', 'public/app/js');

I have three entry points in my Mix file. One for frontend, backend and my "public app" file. The code above stores my frontend vendor.jsand manifest.jsfile inside public/app/jswhen it should be inside public/js.

我的 Mix 文件中有三个入口点。一个用于前端、后端和我的“公共应用程序”文件。上面的代码将我的前端vendor.js和manifest.js文件存储public/app/js在它应该在里面的时候public/js。

When I then try to reference

当我然后尝试参考

<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('app/js/app.js') }}"></script>

it throws webpack errors:

它抛出 webpack 错误：

Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (manifest.js?id=09ecc9b…:55)
    at Object../node_modules/vue/dist/vue.common.js (app.js?id=6431fd7…:sourcemap:28709)
    at __webpack_require__ (manifest.js?id=09ecc9b…:55)
    at Object../resources/assets/app/js/app.js (app.js?id=6431fd7…:sourcemap:37900)
    at __webpack_require__ (manifest.js?id=09ecc9b…:55)
    at Object.0 (app.js?id=6431fd7…:sourcemap:38015)
    at __webpack_require__ (manifest.js?id=09ecc9b…:55)
    at webpackJsonpCallback (manifest.js?id=09ecc9b…:26)
    at app.js?id=6431fd7…:sourcemap:1

Is there currently a way to use multiple entry points in a Mix file?

目前有没有办法在 Mix 文件中使用多个入口点？

回答by Chris

In order to create a mix file for backend and frontend each (and other entry points if needed), adjust package.json:

为了分别为后端和前端（以及其他入口点，如果需要）创建混合文件，请调整package.json：

"scripts": {
    "dev": "npm run development",
    "development": "cross-env process.env.section=website NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env process.env.section=website NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env process.env.section=website NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "admin-dev": "npm run admin-development",
    "admin-development": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "admin-watch": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "admin-prod": "npm run admin-production",
    "admin-production": "cross-env process.env.section=admin NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

webpack.mix.js:

webpack.mix.js：

let mix = require('laravel-mix');

if (process.env.section) {
  require(`${__dirname}/webpack.mix.${process.env.section}.js`);
}

create webpack.mix.website.js:

创建 webpack.mix.website.js：

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

mix
  .setPublicPath(path.normalize('public_html/assets/website'))
  .less('resources/assets/website/less/website.less', 'css/style.css')
  .options({
    processCssUrls: false
  })
  .js('resources/assets/website/js/website.js', 'js/global.js')
;

create webpack.mix.admin.js:

创建 webpack.mix.admin.js：

let mix = require('laravel-mix');

mix
  .setPublicPath(path.normalize('public_html/assets/admin'))
  .options({
    processCssUrls: false
  })
  .js('resources/assets/admin/js/admin.js', 'js/global.js')
  .less('resources/assets/admin/less/admin.less', 'css/style.css')
;

This is currently the only way to create multiple manifest files etc. for multiple entry points on different directory levels.

这是目前为不同目录级别的多个入口点创建多个清单文件等的唯一方法。

回答by Margi

Add "gulp": "^3.9.1"in your package.jsone file

添加"gulp": "^3.9.1"你的 package.jsone 文件

"devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "gulp": "^3.9.1",
    "vue": "^2.1.10"
  },

and in your webpack.mix.js file add bellow code

并在您的 webpack.mix.js 文件中添加以下代码

 const { mix } = require('laravel-mix');
    mix.scripts([
    'resources/assets/js/app.js'

    ], 'public/js/manifest.js')//Combine All JS files into one file
   .minify();

and then run bellow command for minify js

然后运行下面的命令来缩小 js

npm run production

{{ HTML::script('public/js/manifest.js') }} {{ HTML::script('app/js/app.js') }}

{{ HTML::script('public/js/manifest.js') }} {{ HTML::script('app/js/app.js') }}