Compiling Assets (Laravel Mix)

安装和设置

当你创建一个新模块，她同时也创建了assets文件夹和webpack.mix.js配置文件，assets用于存放css/js/images等资源。

php artisan module:make Blog

切换到模块目录

cd Modules/Blog

默认的package.json文件包含了开始使用所需的所有内容。你可以通过运行以下命令来安装她引用的依赖项：

npm install

运行Mix

Mix是Webpack顶部的一个配置层，因此要运行Mix任务，您只需执行默认laravel-modules模块中package.json文件中包含的一个NPM scripts

# 运行所有Mix任务
npm run dev

# 运行所有Mix任务并压缩输出
npm run production

生成版本文件后，您将不知道确切的文件名。因此，您应该在视图中使用Laravel的全局Mix函数来加载对应的哈希资源asset。mix函数将自动匹配哈希文件的当前名称。

<!-- Modules/Blog/Resources/views/layouts/master.blade.php -->

<link rel="stylesheet" href="{{ mix('css/blog.css') }}">

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

有关Laravel Mix的更多信息，请查看此处的文档：https://laravel.com/docs/mix

为了防止主Laravel Mix配置覆盖public/Mix-manifest.json文件

安装 laravel-mix-merge-manifest

npm install laravel-mix-merge-manifest --save-dev

修改webpack.mix.js主文件

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

/* Allow multiple Laravel Mix applications */
require('laravel-mix-merge-manifest');
mix.mergeManifest();
/*-----------------------------------------*/

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');