Laravel mix 怎么引用 npm 下载的插件？

Laravel Mix 提供了定义 Webpack 构建步骤的 API，用于在应用中使用常见的 CSS 和 JavaScript 预处理器。通过链式调用这些简洁方法，可以流畅地定义资源管道。

但是官方手册却没有详细的说明我们通过 npm 下载的插件包，要怎么通过 Webpack 打包到应用的 CSS 和 JavaScript 中，下面介绍一下具体流程，以安装 bootstrap-fileinput 为例：

1.首先我们运行 mix 监听资源变化

  npm run watch

2.通过 npm 安装 bootstrap-fileinput:

  npm install bootstrap-fileinput

执行命令后，bootstrap-fileinput 会被下载到项目的 node_modules 文件夹中

3.引入 bootstrap-fileinput.js

我们打开 resources/js/app.js，加入以下代码：

  require('bootstrap-fileinput')

4.引入 bootstrap-fileinput.css

我们打开 resources/sass/app.sass，加入以下代码：

  @import '~bootstrap-fileinput/scss/fileinput';

到此我们就完成了 Laravel mix 引用 npm 下载的插件，刷新前台页面后就会发现 app.js 和 app.css 中已经编译包含了 bootstrap-fileinput 的 js 和 css 文件。