常见问题

Laravel-mix 必须在 Laravel 下使用吗？

不，在 Laravel 下使用是最好的，但也可以用在任何项目。

我的代码没有压缩

只有在 NODE_ENV（node环境变量）为生产环境 (production) 时才会被压缩，这样会加速编译过程，但在开发过程中是不必要的，下面是在生产环境下运行webpack的示例。

export NODE_ENV=production && webpack --progress --hide-modules

强烈推荐你把下面的 NPM 脚本添加到你的 package.json 文件中，注意 Laravel 已经包括了这些了。

  "scripts": {
    "dev": "NODE_ENV=development webpack --progress --hide-modules",
    "watch": "NODE_ENV=development webpack --watch --progress --hide-modules",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot",
    "production": "NODE_ENV=production webpack --progress --hide-modules"
  },

我使用的是 VM，webpack 不能检测到我的文件变化。

如果你在 VM 下执行 npm run dev ，你会发现 webpack 并不能监视到你的文件改变。如果这样的话，有两种方式来解决这个问题：

1. 配置 webpack 检测文件系统的变化, 注意:检测文件系统是资源密集型操作并且很耗费电池的使用时长。
2. 转发文件通过使用类似于 vagrant-fsnotify 的东西将通知发送给 VM。注意，这是一个 只有 Vagrant 才有的插件。

检测 VM 文件系统变化, 修改一下你的 NPM 脚本，使用 --watch-poll 和 --watch 标签，像这样：

"scripts": {
    "watch": "NODE_ENV=development webpack --watch --watch-poll",
  }

推送文件改动到 VM, 只需在主机安装 vagrant-fsnotify ：

vagrant plugin install vagrant-fsnotify

现在你可以配置 vargrant 来使用这个插件,。在 Homestead 中, 你的 Homestead.yaml 文件修改为这样：

folders:
    - map: /Users/jeffrey/Code/laravel
      to: /home/vagrant/Code/laravel
      options:
          fsnotify: true
          exclude:
              - node_modules
              - vendor

一旦你的 vagrant 机器启动, 只需要在主机上运行 vagrant fsnotify 把文件的改动推送到 vm 上, 然后在 vm 内部运行 npm run watch 就能够检测到文件的改动了.

如果你还是有问题, 来这儿看看吧.

为什么在我的 css 文件里使用的图片在 node_modules 里找不到?

你可能用的是相对路径，但是在你的 resources/assets/sass/app.scss 里并不存在。

body {
    background: url('../img/example.jpg');
}

当引用相对路径的时候，会根据当前文件的路径来搜索，同样的， webpack 会首先搜索 resources/assets/img/example.jpg ，如果找不到，会继续搜索文件位置，包括 node_modules ,如果还找不到，就报错：

 ERROR  Failed to compile with 1 errors

This dependency was not found in node_modules:

有两个解决办法：

1. 让 resources/assets/img/example.jpg 存在这个文件。
2. 编译 css 的时候添加下面的选项，禁用 css 的 url 处理。

mix.sass('resources/assets/sass/app.scss', 'public/css')
   .options({
        processCssUrls: false
   });

他对老项目特别有用，因为你的文件夹结构已经完全创建好了。

我不想把 mix-manifest.json 文件放在项目根目录下。

如果你没有使用 Laravel，你的 mix-manifest.json 文件会被放到项目根目录下，如果你不喜欢的话，可以调用 mix.setPublicPath('dist/');，然后 manifest 文件就会被放到 dist 目录下。

怎样使用 webpack 自动加载模块?

webpack 使用 ProvidePlugin 插件加载一些需要的模块，常用的一个例子就是加载 jQuery。

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
});

// in a module
$('#item'); // <= just works
jQuery('#item'); // <= just works
// $ is automatically set to the exports of module "jquery"

当 Laravel-mix 自动加载模块的时候(像上面说的那样)，你如果想禁用(传一个空对象)，或者用你自己的模块覆盖它，可以调用 mix.autoload() 方法：

mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery'], // more than one
    moment: 'moment' // only one
});

为什么会看到 “Vue packages version mismatch” 错误？

如果在更新依赖项时，编译失败并显示以下消息：

Module build failed: Error:

Vue packages version mismatch:

* vue@2.5.13
* vue-template-compiler@2.5.15

这意味着你的 vue 和 vue-template-compiler 依赖项不同步。 根据Vue的文档，这两个依赖项的版本号必须相同。 根据需要更新以解决这个问题：

npm update vue

// or

npm install vue@2.5.15

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/laravel-mix/4.0...

译文地址：https://learnku.com/docs/laravel-mix/4.0...